From db1ef7c00e0caa0c433984a198d9e8059a7b609e Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Mon, 15 Jul 2024 18:46:14 +0300 Subject: [PATCH] chore: update wds icon component --- .../headless/src/components/Icon/index.ts | 1 - .../headless/src/components/Icon/src/Icon.tsx | 38 --- .../headless/src/components/Icon/src/index.ts | 2 - .../design-system/headless/src/index.ts | 1 - .../design-system/widgets/package.json | 2 +- .../widgets/src/components/Icon/src/Icon.tsx | 60 ++--- .../widgets/src/components/Icon/src/icons.ts | 233 ++++++++++++++++-- .../src/components/Icon/src/styles.module.css | 8 + .../widgets/src/components/Icon/src/types.ts | 30 ++- .../components/Icon/stories/Icon.stories.tsx | 1 + .../widgets/src/scripts/build-icons.ts | 4 +- .../wds/WDSStatsWidget/component/index.tsx | 8 +- .../propertyPaneConfig/contentConfig.ts | 21 +- .../wds/WDSStatsWidget/widget/types.ts | 2 +- app/client/yarn.lock | 23 +- 15 files changed, 297 insertions(+), 137 deletions(-) delete mode 100644 app/client/packages/design-system/headless/src/components/Icon/index.ts delete mode 100644 app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx delete mode 100644 app/client/packages/design-system/headless/src/components/Icon/src/index.ts diff --git a/app/client/packages/design-system/headless/src/components/Icon/index.ts b/app/client/packages/design-system/headless/src/components/Icon/index.ts deleted file mode 100644 index 3bd16e178a03..000000000000 --- a/app/client/packages/design-system/headless/src/components/Icon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./src"; diff --git a/app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx b/app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx deleted file mode 100644 index 3d768f0c88c3..000000000000 --- a/app/client/packages/design-system/headless/src/components/Icon/src/Icon.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import type { ReactElement } from "react"; -import { filterDOMProps } from "@react-aria/utils"; -import type { AriaLabelingProps, DOMProps } from "@react-types/shared"; - -export interface IconProps extends DOMProps, AriaLabelingProps { - "aria-label"?: string; - role?: string; - className?: string; - children: ReactElement; - "aria-hidden"?: boolean | "false" | "true"; -} - -export function _Icon(props: IconProps, ref: React.Ref) { - const { - "aria-hidden": ariaHiddenProp, - "aria-label": ariaLabel, - children, - className, - role = "img", - ...otherProps - } = props; - - return React.cloneElement(children, { - ...filterDOMProps(otherProps), - focusable: "false", - "aria-label": ariaLabel, - "aria-hidden": Boolean(ariaLabel) ? ariaHiddenProp ?? undefined : true, - role, - "data-icon": "", - ref, - className, - }); -} - -_Icon.displayName = "Icon"; - -export const Icon = React.forwardRef(_Icon); diff --git a/app/client/packages/design-system/headless/src/components/Icon/src/index.ts b/app/client/packages/design-system/headless/src/components/Icon/src/index.ts deleted file mode 100644 index 06a476836ad1..000000000000 --- a/app/client/packages/design-system/headless/src/components/Icon/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Icon } from "./Icon"; -export type { IconProps } from "./Icon"; diff --git a/app/client/packages/design-system/headless/src/index.ts b/app/client/packages/design-system/headless/src/index.ts index dbf6ee4d55c3..579239bb67ec 100644 --- a/app/client/packages/design-system/headless/src/index.ts +++ b/app/client/packages/design-system/headless/src/index.ts @@ -1,6 +1,5 @@ // components export * from "./components/Field"; -export * from "./components/Icon"; export * from "./components/Tooltip"; export * from "./components/TextInput"; export * from "./components/TextArea"; diff --git a/app/client/packages/design-system/widgets/package.json b/app/client/packages/design-system/widgets/package.json index 39a1ac53b811..cbbc284f4875 100644 --- a/app/client/packages/design-system/widgets/package.json +++ b/app/client/packages/design-system/widgets/package.json @@ -19,7 +19,7 @@ "@react-aria/visually-hidden": "^3.8.0", "@react-types/actiongroup": "^3.4.6", "@react-types/shared": "^3.23.1", - "@tabler/icons-react": "^2.45.0", + "@tabler/icons-react": "^3.10.0", "clsx": "^2.0.0", "colorjs.io": "^0.4.3", "lodash": "*", diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx b/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx index 92821b45510f..9b7d6f6177ef 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/Icon.tsx @@ -1,52 +1,42 @@ -import type { Ref } from "react"; +import type { Component, Ref } from "react"; import React, { Suspense, forwardRef, lazy, useMemo } from "react"; import { useThemeContext } from "@design-system/theming"; -import { Icon as HeadlessIcon } from "@design-system/headless"; import { ICONS } from "./icons"; import styles from "./styles.module.css"; import type { IconProps } from "./types"; import { FallbackIcon } from "./FallbackIcon"; -const _Icon = (props: IconProps, ref: Ref) => { - const { filled: filledProp, icon, name, size = "medium", ...rest } = props; +const _Icon = (props: IconProps, ref: Ref) => { + const { color, filled: filledProp, name, size = "medium", ...rest } = props; const theme = useThemeContext(); const filled = theme.iconStyle === "filled" || filledProp; const Icon = useMemo(() => { - let Icon: React.ComponentType | null; + const pascalName = ICONS[name]; - if (icon !== undefined) { - Icon = icon as React.ComponentType; - } else if (name !== undefined) { - const pascalName = ICONS[name]; + return lazy(async () => + import("@tabler/icons-react").then((module) => { + if (Boolean(filled)) { + const filledVariant = `${pascalName}Filled`; - Icon = lazy(async () => - import("@tabler/icons-react").then((module) => { - if (Boolean(filled)) { - const filledVariant = `${pascalName}Filled`; - - if (filledVariant in module) { - return { - default: module[filledVariant] as React.ComponentType, - }; - } - } - - if (pascalName in module) { + if (filledVariant in module) { return { - default: module[pascalName] as React.ComponentType, + default: module[filledVariant] as React.ComponentType, }; } + } + + if (pascalName in module) { + return { + default: module[pascalName] as React.ComponentType, + }; + } - return { default: FallbackIcon }; - }), - ); - } else { - Icon = FallbackIcon; - } - return Icon; - }, [name, icon, filled]); + return { default: FallbackIcon }; + }), + ); + }, [name, filled]); return ( ) => { /> } > - - - + /> ); }; diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts b/app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts index 4ecb7d838c63..61be5d8fd4a9 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/icons.ts @@ -1,13 +1,4 @@ export const ICONS = { - "123": "Icon123", - "12-hours": "Icon12Hours", - "24-hours": "Icon24Hours", - "2-fa": "Icon2fa", - "360": "Icon360", - "360-view": "Icon360View", - "3-d-cube-sphere": "Icon3dCubeSphere", - "3-d-cube-sphere-off": "Icon3dCubeSphereOff", - "3-d-rotate": "Icon3dRotate", ab: "IconAB", "ab-2": "IconAB2", "ab-off": "IconABOff", @@ -52,6 +43,7 @@ export const ICONS = { "adjustments-x": "IconAdjustmentsX", "aerial-lift": "IconAerialLift", affiliate: "IconAffiliate", + ai: "IconAi", "air-balloon": "IconAirBalloon", "air-conditioning": "IconAirConditioning", "air-conditioning-disabled": "IconAirConditioningDisabled", @@ -98,11 +90,18 @@ export const ICONS = { "align-center": "IconAlignCenter", "align-justified": "IconAlignJustified", "align-left": "IconAlignLeft", + "align-left-2": "IconAlignLeft2", "align-right": "IconAlignRight", + "align-right-2": "IconAlignRight2", alpha: "IconAlpha", + "alphabet-arabic": "IconAlphabetArabic", + "alphabet-bangla": "IconAlphabetBangla", "alphabet-cyrillic": "IconAlphabetCyrillic", "alphabet-greek": "IconAlphabetGreek", + "alphabet-hebrew": "IconAlphabetHebrew", + "alphabet-korean": "IconAlphabetKorean", "alphabet-latin": "IconAlphabetLatin", + "alphabet-thai": "IconAlphabetThai", alt: "IconAlt", ambulance: "IconAmbulance", ampersand: "IconAmpersand", @@ -183,6 +182,7 @@ export const ICONS = { "arrow-down": "IconArrowDown", "arrow-down-bar": "IconArrowDownBar", "arrow-down-circle": "IconArrowDownCircle", + "arrow-down-from-arc": "IconArrowDownFromArc", "arrow-down-left": "IconArrowDownLeft", "arrow-down-left-circle": "IconArrowDownLeftCircle", "arrow-down-rhombus": "IconArrowDownRhombus", @@ -190,6 +190,7 @@ export const ICONS = { "arrow-down-right-circle": "IconArrowDownRightCircle", "arrow-down-square": "IconArrowDownSquare", "arrow-down-tail": "IconArrowDownTail", + "arrow-down-to-arc": "IconArrowDownToArc", "arrow-elbow-left": "IconArrowElbowLeft", "arrow-elbow-right": "IconArrowElbowRight", "arrow-fork": "IconArrowFork", @@ -201,10 +202,12 @@ export const ICONS = { "arrow-left": "IconArrowLeft", "arrow-left-bar": "IconArrowLeftBar", "arrow-left-circle": "IconArrowLeftCircle", + "arrow-left-from-arc": "IconArrowLeftFromArc", "arrow-left-rhombus": "IconArrowLeftRhombus", "arrow-left-right": "IconArrowLeftRight", "arrow-left-square": "IconArrowLeftSquare", "arrow-left-tail": "IconArrowLeftTail", + "arrow-left-to-arc": "IconArrowLeftToArc", "arrow-loop-left": "IconArrowLoopLeft", "arrow-loop-left-2": "IconArrowLoopLeft2", "arrow-loop-right": "IconArrowLoopRight", @@ -232,9 +235,11 @@ export const ICONS = { "arrow-right": "IconArrowRight", "arrow-right-bar": "IconArrowRightBar", "arrow-right-circle": "IconArrowRightCircle", + "arrow-right-from-arc": "IconArrowRightFromArc", "arrow-right-rhombus": "IconArrowRightRhombus", "arrow-right-square": "IconArrowRightSquare", "arrow-right-tail": "IconArrowRightTail", + "arrow-right-to-arc": "IconArrowRightToArc", "arrow-rotary-first-left": "IconArrowRotaryFirstLeft", "arrow-rotary-first-right": "IconArrowRotaryFirstRight", "arrow-rotary-last-left": "IconArrowRotaryLastLeft", @@ -249,6 +254,7 @@ export const ICONS = { "arrow-up": "IconArrowUp", "arrow-up-bar": "IconArrowUpBar", "arrow-up-circle": "IconArrowUpCircle", + "arrow-up-from-arc": "IconArrowUpFromArc", "arrow-up-left": "IconArrowUpLeft", "arrow-up-left-circle": "IconArrowUpLeftCircle", "arrow-up-rhombus": "IconArrowUpRhombus", @@ -256,6 +262,7 @@ export const ICONS = { "arrow-up-right-circle": "IconArrowUpRightCircle", "arrow-up-square": "IconArrowUpSquare", "arrow-up-tail": "IconArrowUpTail", + "arrow-up-to-arc": "IconArrowUpToArc", "arrow-wave-left-down": "IconArrowWaveLeftDown", "arrow-wave-left-up": "IconArrowWaveLeftUp", "arrow-wave-right-down": "IconArrowWaveRightDown", @@ -321,7 +328,10 @@ export const ICONS = { "augmented-reality": "IconAugmentedReality", "augmented-reality-2": "IconAugmentedReality2", "augmented-reality-off": "IconAugmentedRealityOff", + "auth-2-fa": "IconAuth2fa", "automatic-gearbox": "IconAutomaticGearbox", + automation: "IconAutomation", + avocado: "IconAvocado", award: "IconAward", "award-off": "IconAwardOff", axe: "IconAxe", @@ -340,6 +350,7 @@ export const ICONS = { "badge-4-k": "IconBadge4k", "badge-8-k": "IconBadge8k", "badge-ad": "IconBadgeAd", + "badge-ad-off": "IconBadgeAdOff", "badge-ar": "IconBadgeAr", "badge-cc": "IconBadgeCc", "badge-hd": "IconBadgeHd", @@ -414,7 +425,18 @@ export const ICONS = { "battery-charging": "IconBatteryCharging", "battery-charging-2": "IconBatteryCharging2", "battery-eco": "IconBatteryEco", + "battery-exclamation": "IconBatteryExclamation", "battery-off": "IconBatteryOff", + "battery-vertical": "IconBatteryVertical", + "battery-vertical-1": "IconBatteryVertical1", + "battery-vertical-2": "IconBatteryVertical2", + "battery-vertical-3": "IconBatteryVertical3", + "battery-vertical-4": "IconBatteryVertical4", + "battery-vertical-charging": "IconBatteryVerticalCharging", + "battery-vertical-charging-2": "IconBatteryVerticalCharging2", + "battery-vertical-eco": "IconBatteryVerticalEco", + "battery-vertical-exclamation": "IconBatteryVerticalExclamation", + "battery-vertical-off": "IconBatteryVerticalOff", beach: "IconBeach", "beach-off": "IconBeachOff", bed: "IconBed", @@ -455,6 +477,7 @@ export const ICONS = { "binary-off": "IconBinaryOff", "binary-tree": "IconBinaryTree", "binary-tree-2": "IconBinaryTree2", + binoculars: "IconBinoculars", biohazard: "IconBiohazard", "biohazard-off": "IconBiohazardOff", blade: "IconBlade", @@ -462,7 +485,9 @@ export const ICONS = { "bleach-chlorine": "IconBleachChlorine", "bleach-no-chlorine": "IconBleachNoChlorine", "bleach-off": "IconBleachOff", + "blend-mode": "IconBlendMode", blender: "IconBlender", + blob: "IconBlob", blockquote: "IconBlockquote", bluetooth: "IconBluetooth", "bluetooth-connected": "IconBluetoothConnected", @@ -497,8 +522,11 @@ export const ICONS = { "bookmarks-off": "IconBookmarksOff", books: "IconBooks", "books-off": "IconBooksOff", + boom: "IconBoom", "border-all": "IconBorderAll", "border-bottom": "IconBorderBottom", + "border-bottom-plus": "IconBorderBottomPlus", + "border-corner-ios": "IconBorderCornerIos", "border-corner-pill": "IconBorderCornerPill", "border-corner-rounded": "IconBorderCornerRounded", "border-corner-square": "IconBorderCornerSquare", @@ -506,14 +534,17 @@ export const ICONS = { "border-horizontal": "IconBorderHorizontal", "border-inner": "IconBorderInner", "border-left": "IconBorderLeft", + "border-left-plus": "IconBorderLeftPlus", "border-none": "IconBorderNone", "border-outer": "IconBorderOuter", "border-radius": "IconBorderRadius", "border-right": "IconBorderRight", + "border-right-plus": "IconBorderRightPlus", "border-sides": "IconBorderSides", "border-style": "IconBorderStyle", "border-style-2": "IconBorderStyle2", "border-top": "IconBorderTop", + "border-top-plus": "IconBorderTopPlus", "border-vertical": "IconBorderVertical", bottle: "IconBottle", "bottle-off": "IconBottleOff", @@ -521,6 +552,8 @@ export const ICONS = { "bounce-right": "IconBounceRight", bow: "IconBow", bowl: "IconBowl", + "bowl-chopsticks": "IconBowlChopsticks", + "bowl-spoon": "IconBowlSpoon", box: "IconBox", "box-align-bottom": "IconBoxAlignBottom", "box-align-bottom-left": "IconBoxAlignBottomLeft", @@ -548,7 +581,6 @@ export const ICONS = { "box-multiple-9": "IconBoxMultiple9", "box-off": "IconBoxOff", "box-padding": "IconBoxPadding", - "box-seam": "IconBoxSeam", braces: "IconBraces", "braces-off": "IconBracesOff", brackets: "IconBrackets", @@ -563,6 +595,12 @@ export const ICONS = { "brand-4-chan": "IconBrand4chan", "brand-abstract": "IconBrandAbstract", "brand-adobe": "IconBrandAdobe", + "brand-adobe-after-effect": "IconBrandAdobeAfterEffect", + "brand-adobe-illustrator": "IconBrandAdobeIllustrator", + "brand-adobe-indesign": "IconBrandAdobeIndesign", + "brand-adobe-photoshop": "IconBrandAdobePhotoshop", + "brand-adobe-premier": "IconBrandAdobePremier", + "brand-adobe-xd": "IconBrandAdobeXd", "brand-adonis-js": "IconBrandAdonisJs", "brand-airbnb": "IconBrandAirbnb", "brand-airtable": "IconBrandAirtable", @@ -580,9 +618,12 @@ export const ICONS = { "brand-appgallery": "IconBrandAppgallery", "brand-apple": "IconBrandApple", "brand-apple-arcade": "IconBrandAppleArcade", + "brand-apple-news": "IconBrandAppleNews", "brand-apple-podcast": "IconBrandApplePodcast", "brand-appstore": "IconBrandAppstore", + "brand-arc": "IconBrandArc", "brand-asana": "IconBrandAsana", + "brand-astro": "IconBrandAstro", "brand-auth-0": "IconBrandAuth0", "brand-aws": "IconBrandAws", "brand-azure": "IconBrandAzure", @@ -704,6 +745,7 @@ export const ICONS = { "brand-grindr": "IconBrandGrindr", "brand-guardian": "IconBrandGuardian", "brand-gumroad": "IconBrandGumroad", + "brand-hackerrank": "IconBrandHackerrank", "brand-hbo": "IconBrandHbo", "brand-headlessui": "IconBrandHeadlessui", "brand-hexo": "IconBrandHexo", @@ -741,6 +783,7 @@ export const ICONS = { "brand-mercedes": "IconBrandMercedes", "brand-messenger": "IconBrandMessenger", "brand-meta": "IconBrandMeta", + "brand-metabrainz": "IconBrandMetabrainz", "brand-minecraft": "IconBrandMinecraft", "brand-miniprogram": "IconBrandMiniprogram", "brand-mixpanel": "IconBrandMixpanel", @@ -921,6 +964,7 @@ export const ICONS = { "briefcase-off": "IconBriefcaseOff", brightness: "IconBrightness", "brightness-2": "IconBrightness2", + "brightness-auto": "IconBrightnessAuto", "brightness-down": "IconBrightnessDown", "brightness-half": "IconBrightnessHalf", "brightness-off": "IconBrightnessOff", @@ -934,6 +978,13 @@ export const ICONS = { "browser-x": "IconBrowserX", brush: "IconBrush", "brush-off": "IconBrushOff", + bubble: "IconBubble", + "bubble-minus": "IconBubbleMinus", + "bubble-plus": "IconBubblePlus", + "bubble-tea": "IconBubbleTea", + "bubble-tea-2": "IconBubbleTea2", + "bubble-text": "IconBubbleText", + "bubble-x": "IconBubbleX", bucket: "IconBucket", "bucket-droplet": "IconBucketDroplet", "bucket-off": "IconBucketOff", @@ -945,6 +996,7 @@ export const ICONS = { "building-bridge": "IconBuildingBridge", "building-bridge-2": "IconBuildingBridge2", "building-broadcast-tower": "IconBuildingBroadcastTower", + "building-burj-al-arab": "IconBuildingBurjAlArab", "building-carousel": "IconBuildingCarousel", "building-castle": "IconBuildingCastle", "building-church": "IconBuildingChurch", @@ -959,6 +1011,7 @@ export const ICONS = { "building-lighthouse": "IconBuildingLighthouse", "building-monument": "IconBuildingMonument", "building-mosque": "IconBuildingMosque", + "building-off": "IconBuildingOff", "building-pavilion": "IconBuildingPavilion", "building-skyscraper": "IconBuildingSkyscraper", "building-stadium": "IconBuildingStadium", @@ -966,6 +1019,7 @@ export const ICONS = { "building-tunnel": "IconBuildingTunnel", "building-warehouse": "IconBuildingWarehouse", "building-wind-turbine": "IconBuildingWindTurbine", + buildings: "IconBuildings", bulb: "IconBulb", "bulb-off": "IconBulbOff", bulldozer: "IconBulldozer", @@ -1039,22 +1093,33 @@ export const ICONS = { "camera-x": "IconCameraX", camper: "IconCamper", campfire: "IconCampfire", + cancel: "IconCancel", candle: "IconCandle", candy: "IconCandy", "candy-off": "IconCandyOff", cane: "IconCane", cannabis: "IconCannabis", + "cap-projecting": "IconCapProjecting", + "cap-rounded": "IconCapRounded", + "cap-straight": "IconCapStraight", capsule: "IconCapsule", "capsule-horizontal": "IconCapsuleHorizontal", capture: "IconCapture", "capture-off": "IconCaptureOff", car: "IconCar", + "car-4-wd": "IconCar4wd", "car-crane": "IconCarCrane", "car-crash": "IconCarCrash", + "car-fan": "IconCarFan", + "car-fan-1": "IconCarFan1", + "car-fan-2": "IconCarFan2", + "car-fan-3": "IconCarFan3", + "car-fan-auto": "IconCarFanAuto", "car-garage": "IconCarGarage", "car-off": "IconCarOff", "car-suv": "IconCarSuv", "car-turbine": "IconCarTurbine", + carambola: "IconCarambola", caravan: "IconCaravan", cardboards: "IconCardboards", "cardboards-off": "IconCardboardsOff", @@ -1073,6 +1138,7 @@ export const ICONS = { "cash-banknote": "IconCashBanknote", "cash-banknote-off": "IconCashBanknoteOff", "cash-off": "IconCashOff", + "cash-register": "IconCashRegister", cast: "IconCast", "cast-off": "IconCastOff", cat: "IconCat", @@ -1105,9 +1171,11 @@ export const ICONS = { "chart-arrows-vertical": "IconChartArrowsVertical", "chart-bar": "IconChartBar", "chart-bar-off": "IconChartBarOff", + "chart-bar-popular": "IconChartBarPopular", "chart-bubble": "IconChartBubble", "chart-candle": "IconChartCandle", "chart-circles": "IconChartCircles", + "chart-cohort": "IconChartCohort", "chart-donut": "IconChartDonut", "chart-donut-2": "IconChartDonut2", "chart-donut-3": "IconChartDonut3", @@ -1115,6 +1183,7 @@ export const ICONS = { "chart-dots": "IconChartDots", "chart-dots-2": "IconChartDots2", "chart-dots-3": "IconChartDots3", + "chart-funnel": "IconChartFunnel", "chart-grid-dots": "IconChartGridDots", "chart-histogram": "IconChartHistogram", "chart-infographic": "IconChartInfographic", @@ -1127,6 +1196,8 @@ export const ICONS = { "chart-ppf": "IconChartPpf", "chart-radar": "IconChartRadar", "chart-sankey": "IconChartSankey", + "chart-scatter": "IconChartScatter", + "chart-scatter-3-d": "IconChartScatter3d", "chart-treemap": "IconChartTreemap", check: "IconCheck", checkbox: "IconCheckbox", @@ -1192,6 +1263,8 @@ export const ICONS = { "circle-chevrons-right": "IconCircleChevronsRight", "circle-chevrons-up": "IconCircleChevronsUp", "circle-dashed": "IconCircleDashed", + "circle-dashed-check": "IconCircleDashedCheck", + "circle-dashed-minus": "IconCircleDashedMinus", "circle-dashed-number-0": "IconCircleDashedNumber0", "circle-dashed-number-1": "IconCircleDashedNumber1", "circle-dashed-number-2": "IconCircleDashedNumber2", @@ -1203,6 +1276,7 @@ export const ICONS = { "circle-dashed-number-8": "IconCircleDashedNumber8", "circle-dashed-number-9": "IconCircleDashedNumber9", "circle-dashed-percentage": "IconCircleDashedPercentage", + "circle-dashed-plus": "IconCircleDashedPlus", "circle-dashed-x": "IconCircleDashedX", "circle-dot": "IconCircleDot", "circle-dotted": "IconCircleDotted", @@ -1281,6 +1355,7 @@ export const ICONS = { "clear-all": "IconClearAll", "clear-formatting": "IconClearFormatting", click: "IconClick", + "cliff-jumping": "IconCliffJumping", clipboard: "IconClipboard", "clipboard-check": "IconClipboardCheck", "clipboard-copy": "IconClipboardCopy", @@ -1289,6 +1364,7 @@ export const ICONS = { "clipboard-list": "IconClipboardList", "clipboard-off": "IconClipboardOff", "clipboard-plus": "IconClipboardPlus", + "clipboard-smile": "IconClipboardSmile", "clipboard-text": "IconClipboardText", "clipboard-typography": "IconClipboardTypography", "clipboard-x": "IconClipboardX", @@ -1296,6 +1372,7 @@ export const ICONS = { "clock-12": "IconClock12", "clock-2": "IconClock2", "clock-24": "IconClock24", + "clock-bitcoin": "IconClockBitcoin", "clock-bolt": "IconClockBolt", "clock-cancel": "IconClockCancel", "clock-check": "IconClockCheck", @@ -1336,6 +1413,7 @@ export const ICONS = { "clothes-rack": "IconClothesRack", "clothes-rack-off": "IconClothesRackOff", cloud: "IconCloud", + "cloud-bitcoin": "IconCloudBitcoin", "cloud-bolt": "IconCloudBolt", "cloud-cancel": "IconCloudCancel", "cloud-check": "IconCloudCheck", @@ -1371,7 +1449,7 @@ export const ICONS = { "clover-2": "IconClover2", clubs: "IconClubs", code: "IconCode", - "code-asterix": "IconCodeAsterix", + "code-asterisk": "IconCodeAsterisk", "code-circle": "IconCodeCircle", "code-circle-2": "IconCodeCircle2", "code-dots": "IconCodeDots", @@ -1421,6 +1499,7 @@ export const ICONS = { confucius: "IconConfucius", container: "IconContainer", "container-off": "IconContainerOff", + contract: "IconContract", contrast: "IconContrast", "contrast-2": "IconContrast2", "contrast-2-off": "IconContrast2Off", @@ -1490,6 +1569,8 @@ export const ICONS = { "crystal-ball": "IconCrystalBall", csv: "IconCsv", cube: "IconCube", + "cube-3-d-sphere": "IconCube3dSphere", + "cube-3-d-sphere-off": "IconCube3dSphereOff", "cube-off": "IconCubeOff", "cube-plus": "IconCubePlus", "cube-send": "IconCubeSend", @@ -1589,6 +1670,7 @@ export const ICONS = { "database-plus": "IconDatabasePlus", "database-search": "IconDatabaseSearch", "database-share": "IconDatabaseShare", + "database-smile": "IconDatabaseSmile", "database-star": "IconDatabaseStar", "database-x": "IconDatabaseX", decimal: "IconDecimal", @@ -1764,6 +1846,7 @@ export const ICONS = { "device-tv": "IconDeviceTv", "device-tv-off": "IconDeviceTvOff", "device-tv-old": "IconDeviceTvOld", + "device-unknown": "IconDeviceUnknown", "device-usb": "IconDeviceUsb", "device-vision-pro": "IconDeviceVisionPro", "device-watch": "IconDeviceWatch", @@ -1843,9 +1926,6 @@ export const ICONS = { "disc-golf": "IconDiscGolf", "disc-off": "IconDiscOff", discount: "IconDiscount", - "discount-2": "IconDiscount2", - "discount-2-off": "IconDiscount2Off", - "discount-check": "IconDiscountCheck", "discount-off": "IconDiscountOff", divide: "IconDivide", dna: "IconDna", @@ -1895,6 +1975,7 @@ export const ICONS = { "droplet-x": "IconDropletX", droplets: "IconDroplets", "dual-screen": "IconDualScreen", + dumpling: "IconDumpling", "e-passport": "IconEPassport", ear: "IconEar", "ear-off": "IconEarOff", @@ -1949,6 +2030,7 @@ export const ICONS = { "external-link": "IconExternalLink", "external-link-off": "IconExternalLinkOff", eye: "IconEye", + "eye-bitcoin": "IconEyeBitcoin", "eye-bolt": "IconEyeBolt", "eye-cancel": "IconEyeCancel", "eye-check": "IconEyeCheck", @@ -1957,6 +2039,7 @@ export const ICONS = { "eye-cog": "IconEyeCog", "eye-discount": "IconEyeDiscount", "eye-dollar": "IconEyeDollar", + "eye-dotted": "IconEyeDotted", "eye-down": "IconEyeDown", "eye-edit": "IconEyeEdit", "eye-exclamation": "IconEyeExclamation", @@ -2011,6 +2094,7 @@ export const ICONS = { "file-dots": "IconFileDots", "file-download": "IconFileDownload", "file-euro": "IconFileEuro", + "file-excel": "IconFileExcel", "file-export": "IconFileExport", "file-function": "IconFileFunction", "file-horizontal": "IconFileHorizontal", @@ -2018,6 +2102,7 @@ export const ICONS = { "file-infinity": "IconFileInfinity", "file-info": "IconFileInfo", "file-invoice": "IconFileInvoice", + "file-isr": "IconFileIsr", "file-lambda": "IconFileLambda", "file-like": "IconFileLike", "file-minus": "IconFileMinus", @@ -2073,6 +2158,7 @@ export const ICONS = { "file-unknown": "IconFileUnknown", "file-upload": "IconFileUpload", "file-vector": "IconFileVector", + "file-word": "IconFileWord", "file-x": "IconFileX", "file-zip": "IconFileZip", files: "IconFiles", @@ -2120,6 +2206,7 @@ export const ICONS = { "flag-2": "IconFlag2", "flag-2-off": "IconFlag2Off", "flag-3": "IconFlag3", + "flag-bitcoin": "IconFlagBitcoin", "flag-bolt": "IconFlagBolt", "flag-cancel": "IconFlagCancel", "flag-check": "IconFlagCheck", @@ -2258,7 +2345,10 @@ export const ICONS = { "git-pull-request-draft": "IconGitPullRequestDraft", gizmo: "IconGizmo", glass: "IconGlass", + "glass-champagne": "IconGlassChampagne", + "glass-cocktail": "IconGlassCocktail", "glass-full": "IconGlassFull", + "glass-gin": "IconGlassGin", "glass-off": "IconGlassOff", globe: "IconGlobe", "globe-off": "IconGlobeOff", @@ -2297,14 +2387,17 @@ export const ICONS = { "hammer-off": "IconHammerOff", "hand-click": "IconHandClick", "hand-finger": "IconHandFinger", + "hand-finger-down": "IconHandFingerDown", + "hand-finger-left": "IconHandFingerLeft", "hand-finger-off": "IconHandFingerOff", + "hand-finger-right": "IconHandFingerRight", "hand-grab": "IconHandGrab", "hand-little-finger": "IconHandLittleFinger", + "hand-love-you": "IconHandLoveYou", "hand-middle-finger": "IconHandMiddleFinger", "hand-move": "IconHandMove", "hand-off": "IconHandOff", "hand-ring-finger": "IconHandRingFinger", - "hand-rock": "IconHandRock", "hand-sanitizer": "IconHandSanitizer", "hand-stop": "IconHandStop", "hand-three-fingers": "IconHandThreeFingers", @@ -2324,6 +2417,7 @@ export const ICONS = { "headset-off": "IconHeadsetOff", "health-recognition": "IconHealthRecognition", heart: "IconHeart", + "heart-bitcoin": "IconHeartBitcoin", "heart-bolt": "IconHeartBolt", "heart-broken": "IconHeartBroken", "heart-cancel": "IconHeartCancel", @@ -2428,6 +2522,7 @@ export const ICONS = { "history-toggle": "IconHistoryToggle", home: "IconHome", "home-2": "IconHome2", + "home-bitcoin": "IconHomeBitcoin", "home-bolt": "IconHomeBolt", "home-cancel": "IconHomeCancel", "home-check": "IconHomeCheck", @@ -2467,6 +2562,8 @@ export const ICONS = { "hourglass-high": "IconHourglassHigh", "hourglass-low": "IconHourglassLow", "hourglass-off": "IconHourglassOff", + "hours-12": "IconHours12", + "hours-24": "IconHours24", html: "IconHtml", "http-connect": "IconHttpConnect", "http-delete": "IconHttpDelete", @@ -2489,6 +2586,8 @@ export const ICONS = { "id-badge-2": "IconIdBadge2", "id-badge-off": "IconIdBadgeOff", "id-off": "IconIdOff", + ikosaedr: "IconIkosaedr", + "image-in-picture": "IconImageInPicture", inbox: "IconInbox", "inbox-off": "IconInboxOff", "indent-decrease": "IconIndentDecrease", @@ -2514,6 +2613,7 @@ export const ICONS = { "input-check": "IconInputCheck", "input-search": "IconInputSearch", "input-x": "IconInputX", + invoice: "IconInvoice", ironing: "IconIroning", "ironing-1": "IconIroning1", "ironing-2": "IconIroning2", @@ -2528,12 +2628,15 @@ export const ICONS = { jacket: "IconJacket", jetpack: "IconJetpack", "jewish-star": "IconJewishStar", + "join-bevel": "IconJoinBevel", + "join-round": "IconJoinRound", + "join-straight": "IconJoinStraight", jpg: "IconJpg", json: "IconJson", "jump-rope": "IconJumpRope", karate: "IconKarate", kayak: "IconKayak", - kering: "IconKering", + kerning: "IconKerning", key: "IconKey", "key-off": "IconKeyOff", keyboard: "IconKeyboard", @@ -2545,6 +2648,9 @@ export const ICONS = { "keyframe-align-horizontal": "IconKeyframeAlignHorizontal", "keyframe-align-vertical": "IconKeyframeAlignVertical", keyframes: "IconKeyframes", + label: "IconLabel", + "label-important": "IconLabelImportant", + "label-off": "IconLabelOff", ladder: "IconLadder", "ladder-off": "IconLadderOff", ladle: "IconLadle", @@ -2560,11 +2666,17 @@ export const ICONS = { lasso: "IconLasso", "lasso-off": "IconLassoOff", "lasso-polygon": "IconLassoPolygon", + "laurel-wreath": "IconLaurelWreath", + "laurel-wreath-1": "IconLaurelWreath1", + "laurel-wreath-2": "IconLaurelWreath2", + "laurel-wreath-3": "IconLaurelWreath3", "layers-difference": "IconLayersDifference", "layers-intersect": "IconLayersIntersect", "layers-intersect-2": "IconLayersIntersect2", "layers-linked": "IconLayersLinked", "layers-off": "IconLayersOff", + "layers-selected": "IconLayersSelected", + "layers-selected-bottom": "IconLayersSelectedBottom", "layers-subtract": "IconLayersSubtract", "layers-union": "IconLayersUnion", layout: "IconLayout", @@ -2607,6 +2719,7 @@ export const ICONS = { "layout-sidebar-right-expand": "IconLayoutSidebarRightExpand", "layout-sidebar-right-inactive": "IconLayoutSidebarRightInactive", leaf: "IconLeaf", + "leaf-2": "IconLeaf2", "leaf-off": "IconLeafOff", lego: "IconLego", "lego-off": "IconLegoOff", @@ -2728,6 +2841,7 @@ export const ICONS = { lock: "IconLock", "lock-access": "IconLockAccess", "lock-access-off": "IconLockAccessOff", + "lock-bitcoin": "IconLockBitcoin", "lock-bolt": "IconLockBolt", "lock-cancel": "IconLockCancel", "lock-check": "IconLockCheck", @@ -2740,6 +2854,7 @@ export const ICONS = { "lock-minus": "IconLockMinus", "lock-off": "IconLockOff", "lock-open": "IconLockOpen", + "lock-open-2": "IconLockOpen2", "lock-open-off": "IconLockOpenOff", "lock-pause": "IconLockPause", "lock-pin": "IconLockPin", @@ -2764,6 +2879,7 @@ export const ICONS = { "login-2": "IconLogin2", logout: "IconLogout", "logout-2": "IconLogout2", + logs: "IconLogs", lollipop: "IconLollipop", "lollipop-off": "IconLollipopOff", luggage: "IconLuggage", @@ -2777,6 +2893,7 @@ export const ICONS = { magnetic: "IconMagnetic", mail: "IconMail", "mail-ai": "IconMailAi", + "mail-bitcoin": "IconMailBitcoin", "mail-bolt": "IconMailBolt", "mail-cancel": "IconMailCancel", "mail-check": "IconMailCheck", @@ -2870,6 +2987,8 @@ export const ICONS = { "math-1-divide-2": "IconMath1Divide2", "math-1-divide-3": "IconMath1Divide3", "math-avg": "IconMathAvg", + "math-cos": "IconMathCos", + "math-ctg": "IconMathCtg", "math-equal-greater": "IconMathEqualGreater", "math-equal-lower": "IconMathEqualLower", "math-function": "IconMathFunction", @@ -2881,12 +3000,16 @@ export const ICONS = { "math-integrals": "IconMathIntegrals", "math-lower": "IconMathLower", "math-max": "IconMathMax", + "math-max-min": "IconMathMaxMin", "math-min": "IconMathMin", "math-not": "IconMathNot", "math-off": "IconMathOff", "math-pi": "IconMathPi", "math-pi-divide-2": "IconMathPiDivide2", + "math-sec": "IconMathSec", + "math-sin": "IconMathSin", "math-symbols": "IconMathSymbols", + "math-tg": "IconMathTg", "math-x-divide-2": "IconMathXDivide2", "math-x-divide-y": "IconMathXDivideY", "math-x-divide-y-2": "IconMathXDivideY2", @@ -2912,6 +3035,8 @@ export const ICONS = { menorah: "IconMenorah", menu: "IconMenu", "menu-2": "IconMenu2", + "menu-3": "IconMenu3", + "menu-4": "IconMenu4", "menu-deep": "IconMenuDeep", "menu-order": "IconMenuOrder", message: "IconMessage", @@ -2941,7 +3066,6 @@ export const ICONS = { "message-chatbot": "IconMessageChatbot", "message-check": "IconMessageCheck", "message-circle": "IconMessageCircle", - "message-circle-2": "IconMessageCircle2", "message-circle-bolt": "IconMessageCircleBolt", "message-circle-cancel": "IconMessageCircleCancel", "message-circle-check": "IconMessageCircleCheck", @@ -2961,6 +3085,7 @@ export const ICONS = { "message-circle-share": "IconMessageCircleShare", "message-circle-star": "IconMessageCircleStar", "message-circle-up": "IconMessageCircleUp", + "message-circle-user": "IconMessageCircleUser", "message-circle-x": "IconMessageCircleX", "message-code": "IconMessageCode", "message-cog": "IconMessageCog", @@ -2983,6 +3108,7 @@ export const ICONS = { "message-share": "IconMessageShare", "message-star": "IconMessageStar", "message-up": "IconMessageUp", + "message-user": "IconMessageUser", "message-x": "IconMessageX", messages: "IconMessages", "messages-off": "IconMessagesOff", @@ -3016,9 +3142,11 @@ export const ICONS = { mobiledata: "IconMobiledata", "mobiledata-off": "IconMobiledataOff", moneybag: "IconMoneybag", + monkeybar: "IconMonkeybar", "mood-angry": "IconMoodAngry", "mood-annoyed": "IconMoodAnnoyed", "mood-annoyed-2": "IconMoodAnnoyed2", + "mood-bitcoin": "IconMoodBitcoin", "mood-boy": "IconMoodBoy", "mood-check": "IconMoodCheck", "mood-cog": "IconMoodCog", @@ -3055,7 +3183,7 @@ export const ICONS = { "mood-smile": "IconMoodSmile", "mood-smile-beam": "IconMoodSmileBeam", "mood-smile-dizzy": "IconMoodSmileDizzy", - "mood-suprised": "IconMoodSuprised", + "mood-surprised": "IconMoodSurprised", "mood-tongue": "IconMoodTongue", "mood-tongue-wink": "IconMoodTongueWink", "mood-tongue-wink-2": "IconMoodTongueWink2", @@ -3164,6 +3292,7 @@ export const ICONS = { "number-1": "IconNumber1", "number-10-small": "IconNumber10Small", "number-11-small": "IconNumber11Small", + "number-123": "IconNumber123", "number-12-small": "IconNumber12Small", "number-13-small": "IconNumber13Small", "number-14-small": "IconNumber14Small", @@ -3202,6 +3331,7 @@ export const ICONS = { numbers: "IconNumbers", nurse: "IconNurse", nut: "IconNut", + "object-scan": "IconObjectScan", octagon: "IconOctagon", "octagon-minus": "IconOctagonMinus", "octagon-minus-2": "IconOctagonMinus2", @@ -3281,6 +3411,7 @@ export const ICONS = { "pennant-2": "IconPennant2", "pennant-off": "IconPennantOff", pentagon: "IconPentagon", + "pentagon-minus": "IconPentagonMinus", "pentagon-number-0": "IconPentagonNumber0", "pentagon-number-1": "IconPentagonNumber1", "pentagon-number-2": "IconPentagonNumber2", @@ -3298,6 +3429,21 @@ export const ICONS = { pepper: "IconPepper", "pepper-off": "IconPepperOff", percentage: "IconPercentage", + "percentage-0": "IconPercentage0", + "percentage-10": "IconPercentage10", + "percentage-100": "IconPercentage100", + "percentage-20": "IconPercentage20", + "percentage-25": "IconPercentage25", + "percentage-30": "IconPercentage30", + "percentage-33": "IconPercentage33", + "percentage-40": "IconPercentage40", + "percentage-50": "IconPercentage50", + "percentage-60": "IconPercentage60", + "percentage-66": "IconPercentage66", + "percentage-70": "IconPercentage70", + "percentage-75": "IconPercentage75", + "percentage-80": "IconPercentage80", + "percentage-90": "IconPercentage90", perfume: "IconPerfume", perspective: "IconPerspective", "perspective-off": "IconPerspectiveOff", @@ -3313,6 +3459,7 @@ export const ICONS = { "phone-x": "IconPhoneX", photo: "IconPhoto", "photo-ai": "IconPhotoAi", + "photo-bitcoin": "IconPhotoBitcoin", "photo-bolt": "IconPhotoBolt", "photo-cancel": "IconPhotoCancel", "photo-check": "IconPhotoCheck", @@ -3349,6 +3496,7 @@ export const ICONS = { physotherapist: "IconPhysotherapist", piano: "IconPiano", pick: "IconPick", + "picnic-table": "IconPicnicTable", "picture-in-picture": "IconPictureInPicture", "picture-in-picture-off": "IconPictureInPictureOff", "picture-in-picture-on": "IconPictureInPictureOn", @@ -3459,6 +3607,7 @@ export const ICONS = { printer: "IconPrinter", "printer-off": "IconPrinterOff", prism: "IconPrism", + "prism-light": "IconPrismLight", "prism-off": "IconPrismOff", "prism-plus": "IconPrismPlus", prison: "IconPrison", @@ -3470,6 +3619,7 @@ export const ICONS = { "progress-help": "IconProgressHelp", "progress-x": "IconProgressX", prompt: "IconPrompt", + prong: "IconProng", propeller: "IconPropeller", "propeller-off": "IconPropellerOff", protocol: "IconProtocol", @@ -3588,6 +3738,10 @@ export const ICONS = { rollercoaster: "IconRollercoaster", "rollercoaster-off": "IconRollercoasterOff", rosette: "IconRosette", + "rosette-discount": "IconRosetteDiscount", + "rosette-discount-check": "IconRosetteDiscountCheck", + "rosette-discount-check-off": "IconRosetteDiscountCheckOff", + "rosette-discount-off": "IconRosetteDiscountOff", "rosette-number-0": "IconRosetteNumber0", "rosette-number-1": "IconRosetteNumber1", "rosette-number-2": "IconRosetteNumber2", @@ -3601,6 +3755,7 @@ export const ICONS = { rotate: "IconRotate", "rotate-2": "IconRotate2", "rotate-360": "IconRotate360", + "rotate-3-d": "IconRotate3d", "rotate-clockwise": "IconRotateClockwise", "rotate-clockwise-2": "IconRotateClockwise2", "rotate-dot": "IconRotateDot", @@ -3628,6 +3783,7 @@ export const ICONS = { "ruler-2-off": "IconRuler2Off", "ruler-3": "IconRuler3", "ruler-measure": "IconRulerMeasure", + "ruler-measure-2": "IconRulerMeasure2", "ruler-off": "IconRulerOff", run: "IconRun", "rv-truck": "IconRvTruck", @@ -3650,6 +3806,7 @@ export const ICONS = { "scale-outline-off": "IconScaleOutlineOff", scan: "IconScan", "scan-eye": "IconScanEye", + "scan-position": "IconScanPosition", schema: "IconSchema", "schema-off": "IconSchemaOff", school: "IconSchool", @@ -3670,6 +3827,7 @@ export const ICONS = { "script-plus": "IconScriptPlus", "script-x": "IconScriptX", "scuba-diving": "IconScubaDiving", + "scuba-diving-tank": "IconScubaDivingTank", "scuba-mask": "IconScubaMask", "scuba-mask-off": "IconScubaMaskOff", sdk: "IconSdk", @@ -3728,7 +3886,7 @@ export const ICONS = { "share-2": "IconShare2", "share-3": "IconShare3", "share-off": "IconShareOff", - "shi-jumping": "IconShiJumping", + shareplay: "IconShareplay", shield: "IconShield", "shield-bolt": "IconShieldBolt", "shield-cancel": "IconShieldCancel", @@ -3766,6 +3924,7 @@ export const ICONS = { "shopping-bag-discount": "IconShoppingBagDiscount", "shopping-bag-edit": "IconShoppingBagEdit", "shopping-bag-exclamation": "IconShoppingBagExclamation", + "shopping-bag-heart": "IconShoppingBagHeart", "shopping-bag-minus": "IconShoppingBagMinus", "shopping-bag-plus": "IconShoppingBagPlus", "shopping-bag-search": "IconShoppingBagSearch", @@ -3818,6 +3977,7 @@ export const ICONS = { skateboarding: "IconSkateboarding", "skew-x": "IconSkewX", "skew-y": "IconSkewY", + "ski-jumping": "IconSkiJumping", skull: "IconSkull", slash: "IconSlash", slashes: "IconSlashes", @@ -3848,10 +4008,14 @@ export const ICONS = { "sort-ascending-2": "IconSortAscending2", "sort-ascending-letters": "IconSortAscendingLetters", "sort-ascending-numbers": "IconSortAscendingNumbers", + "sort-ascending-shapes": "IconSortAscendingShapes", + "sort-ascending-small-big": "IconSortAscendingSmallBig", "sort-descending": "IconSortDescending", "sort-descending-2": "IconSortDescending2", "sort-descending-letters": "IconSortDescendingLetters", "sort-descending-numbers": "IconSortDescendingNumbers", + "sort-descending-shapes": "IconSortDescendingShapes", + "sort-descending-small-big": "IconSortDescendingSmallBig", "sort-za": "IconSortZA", sos: "IconSos", soup: "IconSoup", @@ -3859,6 +4023,7 @@ export const ICONS = { "source-code": "IconSourceCode", space: "IconSpace", "space-off": "IconSpaceOff", + spaces: "IconSpaces", "spacing-horizontal": "IconSpacingHorizontal", "spacing-vertical": "IconSpacingVertical", spade: "IconSpade", @@ -4012,7 +4177,9 @@ export const ICONS = { "square-toggle": "IconSquareToggle", "square-toggle-horizontal": "IconSquareToggleHorizontal", "square-x": "IconSquareX", + squares: "IconSquares", "squares-diagonal": "IconSquaresDiagonal", + "squares-selected": "IconSquaresSelected", stack: "IconStack", "stack-2": "IconStack2", "stack-3": "IconStack3", @@ -4107,6 +4274,9 @@ export const ICONS = { target: "IconTarget", "target-arrow": "IconTargetArrow", "target-off": "IconTargetOff", + tax: "IconTax", + "tax-euro": "IconTaxEuro", + "tax-pound": "IconTaxPound", teapot: "IconTeapot", telescope: "IconTelescope", "telescope-off": "IconTelescopeOff", @@ -4116,6 +4286,8 @@ export const ICONS = { "temperature-minus": "IconTemperatureMinus", "temperature-off": "IconTemperatureOff", "temperature-plus": "IconTemperaturePlus", + "temperature-snow": "IconTemperatureSnow", + "temperature-sun": "IconTemperatureSun", template: "IconTemplate", "template-off": "IconTemplateOff", tent: "IconTent", @@ -4141,6 +4313,7 @@ export const ICONS = { "text-size": "IconTextSize", "text-spellcheck": "IconTextSpellcheck", "text-wrap": "IconTextWrap", + "text-wrap-column": "IconTextWrapColumn", "text-wrap-disabled": "IconTextWrapDisabled", texture: "IconTexture", theater: "IconTheater", @@ -4172,6 +4345,10 @@ export const ICONS = { "timeline-event-plus": "IconTimelineEventPlus", "timeline-event-text": "IconTimelineEventText", "timeline-event-x": "IconTimelineEventX", + timezone: "IconTimezone", + "tip-jar": "IconTipJar", + "tip-jar-euro": "IconTipJarEuro", + "tip-jar-pound": "IconTipJarPound", tir: "IconTir", "toggle-left": "IconToggleLeft", "toggle-right": "IconToggleRight", @@ -4225,6 +4402,11 @@ export const ICONS = { "transfer-out": "IconTransferOut", "transfer-vertical": "IconTransferVertical", transform: "IconTransform", + "transform-point": "IconTransformPoint", + "transform-point-bottom-left": "IconTransformPointBottomLeft", + "transform-point-bottom-right": "IconTransformPointBottomRight", + "transform-point-top-left": "IconTransformPointTopLeft", + "transform-point-top-right": "IconTransformPointTopRight", "transition-bottom": "IconTransitionBottom", "transition-left": "IconTransitionLeft", "transition-right": "IconTransitionRight", @@ -4262,11 +4444,17 @@ export const ICONS = { "truck-off": "IconTruckOff", "truck-return": "IconTruckReturn", txt: "IconTxt", + typeface: "IconTypeface", typography: "IconTypography", "typography-off": "IconTypographyOff", + "u-turn-left": "IconUTurnLeft", + "u-turn-right": "IconUTurnRight", ufo: "IconUfo", "ufo-off": "IconUfoOff", umbrella: "IconUmbrella", + "umbrella-2": "IconUmbrella2", + "umbrella-closed": "IconUmbrellaClosed", + "umbrella-closed-2": "IconUmbrellaClosed2", "umbrella-off": "IconUmbrellaOff", underline: "IconUnderline", universe: "IconUniverse", @@ -4275,6 +4463,7 @@ export const ICONS = { urgent: "IconUrgent", usb: "IconUsb", user: "IconUser", + "user-bitcoin": "IconUserBitcoin", "user-bolt": "IconUserBolt", "user-cancel": "IconUserCancel", "user-check": "IconUserCheck", @@ -4295,6 +4484,7 @@ export const ICONS = { "user-plus": "IconUserPlus", "user-question": "IconUserQuestion", "user-scan": "IconUserScan", + "user-screen": "IconUserScreen", "user-search": "IconUserSearch", "user-share": "IconUserShare", "user-shield": "IconUserShield", @@ -4335,10 +4525,14 @@ export const ICONS = { "video-off": "IconVideoOff", "video-plus": "IconVideoPlus", "view-360": "IconView360", + "view-360-arrow": "IconView360Arrow", + "view-360-number": "IconView360Number", "view-360-off": "IconView360Off", viewfinder: "IconViewfinder", "viewfinder-off": "IconViewfinderOff", "viewport-narrow": "IconViewportNarrow", + "viewport-short": "IconViewportShort", + "viewport-tall": "IconViewportTall", "viewport-wide": "IconViewportWide", vinyl: "IconVinyl", vip: "IconVip", @@ -4479,6 +4673,7 @@ export const ICONS = { "zodiac-scorpio": "IconZodiacScorpio", "zodiac-taurus": "IconZodiacTaurus", "zodiac-virgo": "IconZodiacVirgo", + zoom: "IconZoom", "zoom-cancel": "IconZoomCancel", "zoom-check": "IconZoomCheck", "zoom-code": "IconZoomCode", diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css index ac95eef5a246..0cf6235250a0 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css @@ -1,3 +1,5 @@ +@import "../../../shared/colors/colors.module.css"; + .icon { &[data-size="small"] { inline-size: var(--icon-size-1); @@ -16,4 +18,10 @@ block-size: var(--icon-size-3); stroke-width: var(--stroke-width-3); } + + @each $color in colors { + &[data-color="$(color)"] { + color: var(--color-fg-$(color)); + } + } } diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts b/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts index da67e1e12fe5..8c893ad66c41 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts @@ -1,24 +1,30 @@ -import type { ComponentType } from "react"; -import type { IconProps as HeadlessIconProps } from "@design-system/headless"; - +import type { AriaLabelingProps, DOMProps } from "@react-types/shared"; import type { ICONS } from "./icons"; -import type { SIZES } from "../../../shared"; +import type { COLORS, SIZES } from "../../../shared"; -export type IconProps = Omit & { +export interface IconProps extends DOMProps, AriaLabelingProps { /** Size of the icon * @default medium * * Note: we need large size for the icon only */ size?: keyof typeof SIZES; - /** custom icon component - * Note: if custom icon is provided, name prop will be ignored + /** Color of the Icon + * @default inherit */ - icon?: ComponentType; + color?: keyof typeof COLORS; /** Name of the icon*/ - name?: keyof typeof ICONS; - /** storke width */ + name: keyof typeof ICONS; + /** Storke width */ stroke?: number; - /** filled variant */ + /** Filled variant */ filled?: boolean; -}; + /** Defines a string value that labels the current element. */ + "aria-label"?: string; + /** Defines the role of an element. */ + role?: string; + /** Sets the CSS className for the content popover. Only use as a **last resort**. */ + className?: string; + /** The aria-hidden state indicates whether the element is exposed to an accessibility API. */ + "aria-hidden"?: boolean | "false" | "true"; +} diff --git a/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx b/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx index 06da4f77d4ce..389c8b06861d 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx +++ b/app/client/packages/design-system/widgets/src/components/Icon/stories/Icon.stories.tsx @@ -42,6 +42,7 @@ export const Sizes: Story = { export const CustomIcon: Story = { render: () => ( { return ( diff --git a/app/client/packages/design-system/widgets/src/scripts/build-icons.ts b/app/client/packages/design-system/widgets/src/scripts/build-icons.ts index 9c9e20b20ae3..89ad9315da3e 100644 --- a/app/client/packages/design-system/widgets/src/scripts/build-icons.ts +++ b/app/client/packages/design-system/widgets/src/scripts/build-icons.ts @@ -3,11 +3,11 @@ import fs from "fs-extra"; import prettier from "prettier"; import kebabCase from "lodash/kebabCase"; -import * as ICONS from "@tabler/icons-react"; +import { icons } from "@tabler/icons-react"; let content = `export const ICONS = {`; -Object.keys(ICONS) +Object.keys(icons) .filter((name) => name !== "createReactComponent") .filter((name) => !name.endsWith("Filled")) .map((name) => { diff --git a/app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx b/app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx index 7953d121ba2c..eeaf61a9f8f1 100644 --- a/app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx +++ b/app/client/src/widgets/wds/WDSStatsWidget/component/index.tsx @@ -23,7 +23,11 @@ export const StatsComponent = (props: StatsComponentProps) => { isInner > {iconName && iconName !== "(none)" && ( - + )} {label && ( @@ -40,7 +44,7 @@ export const StatsComponent = (props: StatsComponentProps) => { maxWidth="calc(100% - var(--sizing-1))" > ({ - label: capitalize(semantic), - value: semantic, - })), + options: [ + { + label: "Default", + value: "default", + }, + ...Object.values(COLORS).map((semantic) => ({ + label: capitalize(semantic), + value: semantic, + })), + ], isJSConvertible: true, isBindProperty: true, isTriggerProperty: false, - validation: { - type: ValidationTypes.TEXT, - params: { - allowedValues: Object.values(COLORS), - default: COLORS.accent, - }, - }, }, ], }, diff --git a/app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts b/app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts index 80de8575ecc7..871148c16458 100644 --- a/app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts +++ b/app/client/src/widgets/wds/WDSStatsWidget/widget/types.ts @@ -8,6 +8,6 @@ export interface StatsWidgetProps extends WidgetProps { iconAlign?: "start" | "end"; valueChange?: string; valueChangeColor: keyof typeof COLORS; - valueColor?: keyof typeof COLORS; + valueColor?: "default" | keyof typeof COLORS; caption?: string; } diff --git a/app/client/yarn.lock b/app/client/yarn.lock index e84275c89b75..af41b1a89cfe 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -3104,7 +3104,7 @@ __metadata: "@react-aria/visually-hidden": ^3.8.0 "@react-types/actiongroup": ^3.4.6 "@react-types/shared": ^3.23.1 - "@tabler/icons-react": ^2.45.0 + "@tabler/icons-react": ^3.10.0 "@types/fs-extra": ^11.0.4 clsx: ^2.0.0 colorjs.io: ^0.4.3 @@ -10202,22 +10202,21 @@ __metadata: languageName: node linkType: hard -"@tabler/icons-react@npm:^2.45.0": - version: 2.45.0 - resolution: "@tabler/icons-react@npm:2.45.0" +"@tabler/icons-react@npm:^3.10.0": + version: 3.10.0 + resolution: "@tabler/icons-react@npm:3.10.0" dependencies: - "@tabler/icons": 2.45.0 - prop-types: ^15.7.2 + "@tabler/icons": 3.10.0 peerDependencies: - react: ^16.5.1 || ^17.0.0 || ^18.0.0 - checksum: 2cc887b98a98abc09f353363c3d19a8173d2b2a6b7723d92bf752413e131a073f6c05613277af353935c9173b339475d5349c669a4a983c035426eabc0e2a642 + react: ">= 16" + checksum: 2bda44e263acf3ea932b28136dac4792520a50e23cdf2c307cab8fdf60f5c823f0e6921dc209a0b7645ad8a4b407a171e611be6257044558ab8863d9d2eb8a09 languageName: node linkType: hard -"@tabler/icons@npm:2.45.0": - version: 2.45.0 - resolution: "@tabler/icons@npm:2.45.0" - checksum: 01359255e2a1e3314262dc28891d39c984eaaa9d6f148de1a2a7c5de824e5da02f43cd29a735cb2a3ebcda1f801cb394f06cf5b4ecf5dd22ca0131d1cebe6ed3 +"@tabler/icons@npm:3.10.0": + version: 3.10.0 + resolution: "@tabler/icons@npm:3.10.0" + checksum: dbb2a8442acbcc11f4b19174bc625c66f8af36999ecb06cfdd85b90e1288b28b2092fbcc5d1346d827a3e43b9ff6300929c605555971e1490f7be93da506015e languageName: node linkType: hard