@purpurds/icon 6.2.0 → 6.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/icon",
-  "version": "6.2.0",
+  "version": "6.3.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/icon.cjs.js",
   "types": "./dist/icon.d.ts",
@@ -40,12 +40,12 @@
   "source": "src/icon.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/tokens": "6.2.0"
+    "@purpurds/tokens": "6.3.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/react": "^8.3.5",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~10.4.0",
@@ -61,27 +61,26 @@
     "esbuild": "~0.14.23",
     "eslint-plugin-testing-library": "~6.2.0",
     "eslint": "^8.57.0",
-    "glob": "^7.1.6",
     "globby": "^14.0.2",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
     "react-dom": "^19.0.0",
     "react": "^19.0.0",
-    "storybook": "^8.3.5",
+    "storybook": "^8.6.4",
     "svgo": "3.2.0",
-    "tsx": "~4.7.0",
+    "tsx": "^4.19.3",
     "typescript": "^5.6.3",
-    "vite": "5.4.8",
+    "vite": "^6.2.1",
     "vitest-axe": "~0.1.0",
     "vitest": "^2.1.2",
     "vite-plugin-static-copy": "~2.2.0",
+    "@purpurds/autocomplete": "6.3.1",
+    "@purpurds/heading": "6.3.1",
+    "@purpurds/listbox": "6.3.1",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/autocomplete": "6.2.0",
-    "@purpurds/heading": "6.2.0",
-    "@purpurds/listbox": "6.2.0",
-    "@purpurds/paragraph": "6.2.0",
-    "@purpurds/text-field": "6.2.0"
+    "@purpurds/paragraph": "6.3.1",
+    "@purpurds/text-field": "6.3.1"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/all-icon-components.ts

@@ -30,6 +30,7 @@ export { IconBloodPressure } from "./components/blood-pressure";
 export { IconBluetooth } from "./components/bluetooth";
 export { IconBookmark } from "./components/bookmark";
 export { IconBookmarkFilled } from "./components/bookmark-filled";
+export { IconBox } from "./components/box";
 export { IconBroadband } from "./components/broadband";
 export { IconBrokenPhone } from "./components/broken-phone";
 export { IconBulb } from "./components/bulb";
@@ -130,6 +131,7 @@ export { IconHomeCare } from "./components/home-care";
 export { IconHomeFilled } from "./components/home-filled";
 export { IconHomeInstallation } from "./components/home-installation";
 export { IconHospital } from "./components/hospital";
+export { IconHourglass } from "./components/hourglass";
 export { IconImage } from "./components/image";
 export { IconIndustrialIot } from "./components/industrial-iot";
 export { IconIndustry } from "./components/industry";
@@ -175,6 +177,7 @@ export { IconMoneyBackEuro } from "./components/money-back-euro";
 export { IconMoneyBackKr } from "./components/money-back-kr";
 export { IconMoneyEuro } from "./components/money-euro";
 export { IconMoneyKr } from "./components/money-kr";
+export { IconMonitoringIot } from "./components/monitoring-iot";
 export { IconMoreHorizontal } from "./components/more-horizontal";
 export { IconMoreHorizontalFilled } from "./components/more-horizontal-filled";
 export { IconMoreVertical } from "./components/more-vertical";

package/src/all-icons.ts

@@ -30,6 +30,7 @@ export { bloodPressure } from "./assets/blood-pressure";
 export { bluetooth } from "./assets/bluetooth";
 export { bookmark } from "./assets/bookmark";
 export { bookmarkFilled } from "./assets/bookmark-filled";
+export { box } from "./assets/box";
 export { broadband } from "./assets/broadband";
 export { brokenPhone } from "./assets/broken-phone";
 export { bulb } from "./assets/bulb";
@@ -130,6 +131,7 @@ export { homeCare } from "./assets/home-care";
 export { homeFilled } from "./assets/home-filled";
 export { homeInstallation } from "./assets/home-installation";
 export { hospital } from "./assets/hospital";
+export { hourglass } from "./assets/hourglass";
 export { image } from "./assets/image";
 export { industrialIot } from "./assets/industrial-iot";
 export { industry } from "./assets/industry";
@@ -175,6 +177,7 @@ export { moneyBackEuro } from "./assets/money-back-euro";
 export { moneyBackKr } from "./assets/money-back-kr";
 export { moneyEuro } from "./assets/money-euro";
 export { moneyKr } from "./assets/money-kr";
+export { monitoringIot } from "./assets/monitoring-iot";
 export { moreHorizontal } from "./assets/more-horizontal";
 export { moreHorizontalFilled } from "./assets/more-horizontal-filled";
 export { moreVertical } from "./assets/more-vertical";

package/src/assets/box.ts

@@ -0,0 +1,6 @@
+export const box = {
+  name: "box" as const,
+  svg: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6138 1.59368C11.8569 1.46877 12.1431 1.46877 12.3862 1.59368L21.0226 6.0303C21.3152 6.1806 21.5 6.48785 21.5 6.82394C21.5 7.16004 21.3152 7.46728 21.0226 7.61759L12.8636 11.809V20.177L19.7727 16.6277V10.5211C19.7727 10.0311 20.1593 9.6338 20.6364 9.6338C21.1134 9.6338 21.5 10.0311 21.5 10.5211V17.1761C21.5 17.5122 21.3152 17.8194 21.0226 17.9698L12.3862 22.4064C12.1431 22.5312 11.8569 22.5312 11.6138 22.4064L2.9774 17.9698C2.68482 17.8194 2.5 17.5122 2.5 17.1761V6.82394C2.5 6.48785 2.68482 6.1806 2.9774 6.0303L11.6138 1.59368ZM11.1364 20.177V11.809L4.22727 8.25966V16.6277L11.1364 20.177ZM5.29478 6.82394L7.68181 8.05019L14.387 4.60563L12 3.37938L5.29478 6.82394ZM16.3182 5.59769L9.61296 9.04225L12 10.2685L18.7053 6.82394L16.3182 5.59769Z"/></svg>`,
+  keywords: ["box"],
+  category: "other" as const,
+};

package/src/assets/hourglass.ts

@@ -0,0 +1,6 @@
+export const hourglass = {
+  name: "hourglass" as const,
+  svg: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 2.9C3 2.40294 3.40294 2 3.9 2H20.1C20.597 2 21 2.40294 21 2.9V3.49998C21 4.82412 20.1125 5.94098 18.9 6.28823V7.52784C18.9 9.38382 17.8513 11.0805 16.1913 11.9105L16.0124 12L16.1913 12.0894C17.8513 12.9194 18.9 14.6161 18.9 16.4721V17.6117C20.1125 17.959 21 19.0758 21 20.4V21.1C21 21.5971 20.597 22 20.1 22H3.9C3.40294 22 3 21.5971 3 21.1V20.4C3 19.0759 3.88742 17.959 5.09995 17.6117V16.4721C5.09995 14.6161 6.14856 12.9194 7.8086 12.0894L7.98749 12L7.8086 11.9105C6.14856 11.0805 5.09995 9.38382 5.09995 7.52784V6.28821C3.88742 5.94093 3 4.82409 3 3.49998V2.9ZM6.89995 6.39998V7.52784C6.89995 8.70203 7.56336 9.77545 8.61359 10.3006L10.4024 11.195C10.7073 11.3474 10.9 11.6591 10.9 12C10.9 12.3409 10.7073 12.6525 10.4024 12.805L8.61359 13.6994C7.56336 14.2245 6.89995 15.2979 6.89995 16.4721V17.5H17.1V16.4721C17.1 15.2979 16.4365 14.2245 15.3863 13.6994L13.5975 12.805C13.2926 12.6525 13.1 12.3409 13.1 12C13.1 11.6591 13.2926 11.3474 13.5975 11.195L15.3863 10.3006C16.4365 9.77545 17.1 8.70203 17.1 7.52784V6.39998H6.89995ZM4.84141 3.8C4.97201 4.26169 5.3965 4.59998 5.9 4.59998H18.1C18.6035 4.59998 19.028 4.26169 19.1586 3.8H4.84141ZM4.81813 20.2C4.91217 19.688 5.36077 19.3 5.9 19.3H18.1C18.6392 19.3 19.0878 19.688 19.1818 20.2H4.81813ZM8 17C8 15.3431 9.34315 14 11 14H13C14.6569 14 16 15.3431 16 17H8ZM11 11C9.89543 11 9 10.1046 9 9H15C15 10.1046 14.1046 11 13 11H11Z"/></svg>`,
+  keywords: ["hourglass"],
+  category: "other" as const,
+};

package/src/assets/monitoring-iot.ts

@@ -0,0 +1,6 @@
+export const monitoringIot = {
+  name: "monitoring-iot" as const,
+  svg: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M20.4166 17.2017C19.3 16.9755 18.2943 17.619 17.9448 18.5759C17.9017 18.5681 17.8578 18.5625 17.8125 18.5625L17.0625 18.5607V14.8122C17.0625 13.9839 16.3911 13.3125 15.5628 13.3125H5.06249C4.74572 13.3125 3.5625 12.9306 3.5625 11.0625C3.5625 7.98891 6.58373 7.32424 6.70971 7.29787L7.38244 7.15761L7.30737 6.47463C7.281 6.23586 7.12536 4.12246 9.72509 3.54457C12.5292 2.92238 14.1119 5.35878 14.1764 5.45986L14.5378 6.01503L15.1377 5.73818C15.2457 5.68874 16.2228 5.28334 17.2822 6.34279C17.7096 6.77016 17.8107 7.7538 17.8125 8.06252L17.8169 8.80409L18.5585 8.81252C20.7037 8.83705 20.8125 10.6912 20.8125 11.0625C20.8125 12.3662 19.0898 12.9708 19.0752 12.976C18.6823 13.1071 18.4698 13.5319 18.601 13.9248C18.7317 14.3174 19.1558 14.5309 19.5498 14.3991C19.6626 14.3613 22.3125 13.4506 22.3125 11.0625C22.3125 8.57045 20.5811 7.61867 19.2583 7.37843C19.1704 6.76466 18.9412 5.88026 18.3428 5.28224C17.1006 4.04006 15.8302 4.04079 15.0996 4.19167C14.347 3.27358 12.3999 1.4125 9.3999 2.08046C6.6892 2.68288 5.8861 4.63882 5.80151 5.99526C4.24731 6.5259 2.0625 8.03798 2.0625 11.0625C2.0625 13.6491 3.81665 14.8125 5.0625 14.8125H6.56268L6.5636 18.5625H5.86278C5.50855 17.6121 4.50534 16.9753 3.39265 17.2024C2.57358 17.3695 1.90891 18.0285 1.73662 18.8465C1.44351 20.2381 2.50243 21.4688 3.84375 21.4688C4.7688 21.4688 5.55722 20.8823 5.86278 20.0625H6.56359C7.39141 20.0625 8.0625 19.3914 8.0625 18.5636V14.8125H11.0625V18.2191C10.1566 18.6058 9.56716 19.5951 9.8016 20.6808C9.97599 21.4884 10.6307 22.1393 11.4391 22.31C12.8312 22.604 14.0625 21.5448 14.0625 20.2031C14.0625 19.2429 13.4315 18.4281 12.5625 18.1498V14.8125H15.5625V18.5607C15.5625 19.3901 16.2349 20.0625 17.0643 20.0625H17.8125C17.8578 20.0625 17.9017 20.0569 17.9448 20.0492C18.2468 20.876 19.0387 21.4688 19.9687 21.4688C21.3101 21.4688 22.3691 20.2381 22.0758 18.8464C21.9033 18.0273 21.237 17.3678 20.4166 17.2017ZM3.84375 19.9688C3.48193 19.9688 3.1875 19.6743 3.1875 19.3125C3.1875 18.9507 3.48193 18.6563 3.84375 18.6563C4.20556 18.6563 4.5 18.9507 4.5 19.3125C4.5 19.6743 4.20556 19.9688 3.84375 19.9688ZM11.9062 20.8594C11.5444 20.8594 11.25 20.565 11.25 20.2031C11.25 19.8413 11.5444 19.5469 11.9062 19.5469C12.2681 19.5469 12.5625 19.8413 12.5625 20.2031C12.5625 20.565 12.2681 20.8594 11.9062 20.8594ZM19.9687 19.9688C19.6069 19.9688 19.3125 19.6743 19.3125 19.3125C19.3125 18.9507 19.6069 18.6563 19.9687 18.6563C20.3306 18.6563 20.625 18.9507 20.625 19.3125C20.625 19.6743 20.3306 19.9688 19.9687 19.9688Z"/></svg>`,
+  keywords: ["monitoring-iot"],
+  category: "other" as const,
+};

package/src/assets/svgs/box.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6138 1.59368C11.8569 1.46877 12.1431 1.46877 12.3862 1.59368L21.0226 6.0303C21.3152 6.1806 21.5 6.48785 21.5 6.82394C21.5 7.16004 21.3152 7.46728 21.0226 7.61759L12.8636 11.809V20.177L19.7727 16.6277V10.5211C19.7727 10.0311 20.1593 9.6338 20.6364 9.6338C21.1134 9.6338 21.5 10.0311 21.5 10.5211V17.1761C21.5 17.5122 21.3152 17.8194 21.0226 17.9698L12.3862 22.4064C12.1431 22.5312 11.8569 22.5312 11.6138 22.4064L2.9774 17.9698C2.68482 17.8194 2.5 17.5122 2.5 17.1761V6.82394C2.5 6.48785 2.68482 6.1806 2.9774 6.0303L11.6138 1.59368ZM11.1364 20.177V11.809L4.22727 8.25966V16.6277L11.1364 20.177ZM5.29478 6.82394L7.68181 8.05019L14.387 4.60563L12 3.37938L5.29478 6.82394ZM16.3182 5.59769L9.61296 9.04225L12 10.2685L18.7053 6.82394L16.3182 5.59769Z"/></svg>

package/src/assets/svgs/hourglass.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 2.9C3 2.40294 3.40294 2 3.9 2H20.1C20.597 2 21 2.40294 21 2.9V3.49998C21 4.82412 20.1125 5.94098 18.9 6.28823V7.52784C18.9 9.38382 17.8513 11.0805 16.1913 11.9105L16.0124 12L16.1913 12.0894C17.8513 12.9194 18.9 14.6161 18.9 16.4721V17.6117C20.1125 17.959 21 19.0758 21 20.4V21.1C21 21.5971 20.597 22 20.1 22H3.9C3.40294 22 3 21.5971 3 21.1V20.4C3 19.0759 3.88742 17.959 5.09995 17.6117V16.4721C5.09995 14.6161 6.14856 12.9194 7.8086 12.0894L7.98749 12L7.8086 11.9105C6.14856 11.0805 5.09995 9.38382 5.09995 7.52784V6.28821C3.88742 5.94093 3 4.82409 3 3.49998V2.9ZM6.89995 6.39998V7.52784C6.89995 8.70203 7.56336 9.77545 8.61359 10.3006L10.4024 11.195C10.7073 11.3474 10.9 11.6591 10.9 12C10.9 12.3409 10.7073 12.6525 10.4024 12.805L8.61359 13.6994C7.56336 14.2245 6.89995 15.2979 6.89995 16.4721V17.5H17.1V16.4721C17.1 15.2979 16.4365 14.2245 15.3863 13.6994L13.5975 12.805C13.2926 12.6525 13.1 12.3409 13.1 12C13.1 11.6591 13.2926 11.3474 13.5975 11.195L15.3863 10.3006C16.4365 9.77545 17.1 8.70203 17.1 7.52784V6.39998H6.89995ZM4.84141 3.8C4.97201 4.26169 5.3965 4.59998 5.9 4.59998H18.1C18.6035 4.59998 19.028 4.26169 19.1586 3.8H4.84141ZM4.81813 20.2C4.91217 19.688 5.36077 19.3 5.9 19.3H18.1C18.6392 19.3 19.0878 19.688 19.1818 20.2H4.81813ZM8 17C8 15.3431 9.34315 14 11 14H13C14.6569 14 16 15.3431 16 17H8ZM11 11C9.89543 11 9 10.1046 9 9H15C15 10.1046 14.1046 11 13 11H11Z"/></svg>

package/src/assets/svgs/monitoring-iot.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M20.4166 17.2017C19.3 16.9755 18.2943 17.619 17.9448 18.5759C17.9017 18.5681 17.8578 18.5625 17.8125 18.5625L17.0625 18.5607V14.8122C17.0625 13.9839 16.3911 13.3125 15.5628 13.3125H5.06249C4.74572 13.3125 3.5625 12.9306 3.5625 11.0625C3.5625 7.98891 6.58373 7.32424 6.70971 7.29787L7.38244 7.15761L7.30737 6.47463C7.281 6.23586 7.12536 4.12246 9.72509 3.54457C12.5292 2.92238 14.1119 5.35878 14.1764 5.45986L14.5378 6.01503L15.1377 5.73818C15.2457 5.68874 16.2228 5.28334 17.2822 6.34279C17.7096 6.77016 17.8107 7.7538 17.8125 8.06252L17.8169 8.80409L18.5585 8.81252C20.7037 8.83705 20.8125 10.6912 20.8125 11.0625C20.8125 12.3662 19.0898 12.9708 19.0752 12.976C18.6823 13.1071 18.4698 13.5319 18.601 13.9248C18.7317 14.3174 19.1558 14.5309 19.5498 14.3991C19.6626 14.3613 22.3125 13.4506 22.3125 11.0625C22.3125 8.57045 20.5811 7.61867 19.2583 7.37843C19.1704 6.76466 18.9412 5.88026 18.3428 5.28224C17.1006 4.04006 15.8302 4.04079 15.0996 4.19167C14.347 3.27358 12.3999 1.4125 9.3999 2.08046C6.6892 2.68288 5.8861 4.63882 5.80151 5.99526C4.24731 6.5259 2.0625 8.03798 2.0625 11.0625C2.0625 13.6491 3.81665 14.8125 5.0625 14.8125H6.56268L6.5636 18.5625H5.86278C5.50855 17.6121 4.50534 16.9753 3.39265 17.2024C2.57358 17.3695 1.90891 18.0285 1.73662 18.8465C1.44351 20.2381 2.50243 21.4688 3.84375 21.4688C4.7688 21.4688 5.55722 20.8823 5.86278 20.0625H6.56359C7.39141 20.0625 8.0625 19.3914 8.0625 18.5636V14.8125H11.0625V18.2191C10.1566 18.6058 9.56716 19.5951 9.8016 20.6808C9.97599 21.4884 10.6307 22.1393 11.4391 22.31C12.8312 22.604 14.0625 21.5448 14.0625 20.2031C14.0625 19.2429 13.4315 18.4281 12.5625 18.1498V14.8125H15.5625V18.5607C15.5625 19.3901 16.2349 20.0625 17.0643 20.0625H17.8125C17.8578 20.0625 17.9017 20.0569 17.9448 20.0492C18.2468 20.876 19.0387 21.4688 19.9687 21.4688C21.3101 21.4688 22.3691 20.2381 22.0758 18.8464C21.9033 18.0273 21.237 17.3678 20.4166 17.2017ZM3.84375 19.9688C3.48193 19.9688 3.1875 19.6743 3.1875 19.3125C3.1875 18.9507 3.48193 18.6563 3.84375 18.6563C4.20556 18.6563 4.5 18.9507 4.5 19.3125C4.5 19.6743 4.20556 19.9688 3.84375 19.9688ZM11.9062 20.8594C11.5444 20.8594 11.25 20.565 11.25 20.2031C11.25 19.8413 11.5444 19.5469 11.9062 19.5469C12.2681 19.5469 12.5625 19.8413 12.5625 20.2031C12.5625 20.565 12.2681 20.8594 11.9062 20.8594ZM19.9687 19.9688C19.6069 19.9688 19.3125 19.6743 19.3125 19.3125C19.3125 18.9507 19.6069 18.6563 19.9687 18.6563C20.3306 18.6563 20.625 18.9507 20.625 19.3125C20.625 19.6743 20.3306 19.9688 19.9687 19.9688Z"/></svg>

package/src/components/box.tsx

@@ -0,0 +1,12 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated do not edit it manually",
+ */
+import React from "react";
+
+import { box } from "../assets/box";
+import { Icon, IconBaseProps } from "../icon";
+
+export const IconBox = (props: IconBaseProps) => <Icon {...props} svg={box} />;
+
+IconBox.displayName = "IconBox";

package/src/components/components-metadata.js

@@ -1732,6 +1732,14 @@ module.exports = [
     moduleName: "icon/assets/blood-pressure",
     exports: ["bloodPressure"],
   },
+  {
+    moduleName: "icon/box",
+    exports: ["IconBox"],
+  },
+  {
+    moduleName: "icon/assets/box",
+    exports: ["box"],
+  },
   {
     moduleName: "icon/bulb",
     exports: ["IconBulb"],
@@ -1916,6 +1924,14 @@ module.exports = [
     moduleName: "icon/assets/home-care",
     exports: ["homeCare"],
   },
+  {
+    moduleName: "icon/hourglass",
+    exports: ["IconHourglass"],
+  },
+  {
+    moduleName: "icon/assets/hourglass",
+    exports: ["hourglass"],
+  },
   {
     moduleName: "icon/infinite",
     exports: ["IconInfinite"],
@@ -1972,6 +1988,14 @@ module.exports = [
     moduleName: "icon/assets/moisture",
     exports: ["moisture"],
   },
+  {
+    moduleName: "icon/monitoring-iot",
+    exports: ["IconMonitoringIot"],
+  },
+  {
+    moduleName: "icon/assets/monitoring-iot",
+    exports: ["monitoringIot"],
+  },
   {
     moduleName: "icon/offering",
     exports: ["IconOffering"],

package/src/components/hourglass.tsx

@@ -0,0 +1,12 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated do not edit it manually",
+ */
+import React from "react";
+
+import { hourglass } from "../assets/hourglass";
+import { Icon, IconBaseProps } from "../icon";
+
+export const IconHourglass = (props: IconBaseProps) => <Icon {...props} svg={hourglass} />;
+
+IconHourglass.displayName = "IconHourglass";

package/src/components/monitoring-iot.tsx

@@ -0,0 +1,12 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated do not edit it manually",
+ */
+import React from "react";
+
+import { monitoringIot } from "../assets/monitoring-iot";
+import { Icon, IconBaseProps } from "../icon";
+
+export const IconMonitoringIot = (props: IconBaseProps) => <Icon {...props} svg={monitoringIot} />;
+
+IconMonitoringIot.displayName = "IconMonitoringIot";

package/src/icon-imports.ts

@@ -33,6 +33,7 @@ export const iconList = {
   bluetooth: icons.bluetooth,
   bookmark: icons.bookmark,
   "bookmark-filled": icons.bookmarkFilled,
+  box: icons.box,
   broadband: icons.broadband,
   "broken-phone": icons.brokenPhone,
   bulb: icons.bulb,
@@ -133,6 +134,7 @@ export const iconList = {
   "home-filled": icons.homeFilled,
   "home-installation": icons.homeInstallation,
   hospital: icons.hospital,
+  hourglass: icons.hourglass,
   image: icons.image,
   "industrial-iot": icons.industrialIot,
   industry: icons.industry,
@@ -178,6 +180,7 @@ export const iconList = {
   "money-back-kr": icons.moneyBackKr,
   "money-euro": icons.moneyEuro,
   "money-kr": icons.moneyKr,
+  "monitoring-iot": icons.monitoringIot,
   "more-horizontal": icons.moreHorizontal,
   "more-horizontal-filled": icons.moreHorizontalFilled,
   "more-vertical": icons.moreVertical,

package/src/icon.stories.tsx

@@ -10,7 +10,8 @@ import "@purpurds/autocomplete/styles";
 import "@purpurds/listbox/styles";
 import "@purpurds/heading/styles";
 import "@purpurds/tokens";
-import "./icon.stories.css";
+// import "./icon.stories.css";
+import "./icon.story.css";
 import { IconHeart } from "./all-icon-components";
 import { DynamicIcon as DynamicIconComponent } from "./dynamic-icon";
 import { Icon, sizes } from "./icon";
@@ -66,14 +67,28 @@ export const Showcase: Story = {
   tags: ["visual:check"],
   render: (props) => (
     <div style={{ display: "flex", gap: 12, flexDirection: "column" }}>
-      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          alignItems: "center",
+          color: "var(--purpur-color-text-default)",
+        }}
+      >
         <IconHeart size={props.size} />
         <Heading tag="h2" variant="subsection-100">
           Rendered using prebuild component (recommended)
         </Heading>
       </div>
       <hr style={{ width: "100%" }} />
-      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          alignItems: "center",
+          color: "var(--purpur-color-text-default)",
+        }}
+      >
         <Icon {...props} />
         <Heading tag="h2" variant="subsection-100">
           Rendered using Icon + svg
@@ -111,7 +126,14 @@ export const DynamicIcon: StoryObj<typeof DynamicIconComponent> = {
   tags: ["visual:check"],
   render: (props) => (
     <div style={{ display: "flex", gap: 12, flexDirection: "column" }}>
-      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <div
+        style={{
+          display: "flex",
+          gap: 12,
+          alignItems: "center",
+          color: "var(--purpur-color-text-default)",
+        }}
+      >
         <DynamicIconComponent {...props} />
         <Paragraph>
           name: <b>{props.name}</b>
@@ -268,7 +290,13 @@ const AllIconsStory = () => {
             <div className="icon-grid">
               {z.entries.map((icon) => (
                 <div className="icon-wrapper" key={icon.name}>
-                  <div className="icon-box">
+                  <div
+                    className="icon-box"
+                    style={{
+                      color: "var(--purpur-color-text-default)",
+                      background: "var(--purpur-color-background-primary)",
+                    }}
+                  >
                     <Icon svg={icon} size="lg" />
                   </div>
                   <Paragraph>{icon.name}</Paragraph>

package/src/svgs/other/box.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6138 1.59368C11.8569 1.46877 12.1431 1.46877 12.3862 1.59368L21.0226 6.0303C21.3152 6.1806 21.5 6.48785 21.5 6.82394C21.5 7.16004 21.3152 7.46728 21.0226 7.61759L12.8636 11.809V20.177L19.7727 16.6277V10.5211C19.7727 10.0311 20.1593 9.6338 20.6364 9.6338C21.1134 9.6338 21.5 10.0311 21.5 10.5211V17.1761C21.5 17.5122 21.3152 17.8194 21.0226 17.9698L12.3862 22.4064C12.1431 22.5312 11.8569 22.5312 11.6138 22.4064L2.9774 17.9698C2.68482 17.8194 2.5 17.5122 2.5 17.1761V6.82394C2.5 6.48785 2.68482 6.1806 2.9774 6.0303L11.6138 1.59368ZM11.1364 20.177V11.809L4.22727 8.25966V16.6277L11.1364 20.177ZM5.29478 6.82394L7.68181 8.05019L14.387 4.60563L12 3.37938L5.29478 6.82394ZM16.3182 5.59769L9.61296 9.04225L12 10.2685L18.7053 6.82394L16.3182 5.59769Z" fill="#1E1E20"/>
+</svg>

package/src/svgs/other/hourglass.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 2.9C3 2.40294 3.40294 2 3.9 2H20.1C20.597 2 21 2.40294 21 2.9V3.49998C21 4.82412 20.1125 5.94098 18.9 6.28823V7.52784C18.9 9.38382 17.8513 11.0805 16.1913 11.9105L16.0124 12L16.1913 12.0894C17.8513 12.9194 18.9 14.6161 18.9 16.4721V17.6117C20.1125 17.959 21 19.0758 21 20.4V21.1C21 21.5971 20.597 22 20.1 22H3.9C3.40294 22 3 21.5971 3 21.1V20.4C3 19.0759 3.88742 17.959 5.09995 17.6117V16.4721C5.09995 14.6161 6.14856 12.9194 7.8086 12.0894L7.98749 12L7.8086 11.9105C6.14856 11.0805 5.09995 9.38382 5.09995 7.52784V6.28821C3.88742 5.94093 3 4.82409 3 3.49998V2.9ZM6.89995 6.39998V7.52784C6.89995 8.70203 7.56336 9.77545 8.61359 10.3006L10.4024 11.195C10.7073 11.3474 10.9 11.6591 10.9 12C10.9 12.3409 10.7073 12.6525 10.4024 12.805L8.61359 13.6994C7.56336 14.2245 6.89995 15.2979 6.89995 16.4721V17.5H17.1V16.4721C17.1 15.2979 16.4365 14.2245 15.3863 13.6994L13.5975 12.805C13.2926 12.6525 13.1 12.3409 13.1 12C13.1 11.6591 13.2926 11.3474 13.5975 11.195L15.3863 10.3006C16.4365 9.77545 17.1 8.70203 17.1 7.52784V6.39998H6.89995ZM4.84141 3.8C4.97201 4.26169 5.3965 4.59998 5.9 4.59998H18.1C18.6035 4.59998 19.028 4.26169 19.1586 3.8H4.84141ZM4.81813 20.2C4.91217 19.688 5.36077 19.3 5.9 19.3H18.1C18.6392 19.3 19.0878 19.688 19.1818 20.2H4.81813ZM8 17C8 15.3431 9.34315 14 11 14H13C14.6569 14 16 15.3431 16 17H8ZM11 11C9.89543 11 9 10.1046 9 9H15C15 10.1046 14.1046 11 13 11H11Z" fill="#1E1E20"/>
+</svg>

package/src/svgs/other/monitoring-iot.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4166 17.2017C19.3 16.9755 18.2943 17.619 17.9448 18.5759C17.9017 18.5681 17.8578 18.5625 17.8125 18.5625L17.0625 18.5607V14.8122C17.0625 13.9839 16.3911 13.3125 15.5628 13.3125H5.06249C4.74572 13.3125 3.5625 12.9306 3.5625 11.0625C3.5625 7.98891 6.58373 7.32424 6.70971 7.29787L7.38244 7.15761L7.30737 6.47463C7.281 6.23586 7.12536 4.12246 9.72509 3.54457C12.5292 2.92238 14.1119 5.35878 14.1764 5.45986L14.5378 6.01503L15.1377 5.73818C15.2457 5.68874 16.2228 5.28334 17.2822 6.34279C17.7096 6.77016 17.8107 7.7538 17.8125 8.06252L17.8169 8.80409L18.5585 8.81252C20.7037 8.83705 20.8125 10.6912 20.8125 11.0625C20.8125 12.3662 19.0898 12.9708 19.0752 12.976C18.6823 13.1071 18.4698 13.5319 18.601 13.9248C18.7317 14.3174 19.1558 14.5309 19.5498 14.3991C19.6626 14.3613 22.3125 13.4506 22.3125 11.0625C22.3125 8.57045 20.5811 7.61867 19.2583 7.37843C19.1704 6.76466 18.9412 5.88026 18.3428 5.28224C17.1006 4.04006 15.8302 4.04079 15.0996 4.19167C14.347 3.27358 12.3999 1.4125 9.3999 2.08046C6.6892 2.68288 5.8861 4.63882 5.80151 5.99526C4.24731 6.5259 2.0625 8.03798 2.0625 11.0625C2.0625 13.6491 3.81665 14.8125 5.0625 14.8125H6.56268L6.5636 18.5625H5.86278C5.50855 17.6121 4.50534 16.9753 3.39265 17.2024C2.57358 17.3695 1.90891 18.0285 1.73662 18.8465C1.44351 20.2381 2.50243 21.4688 3.84375 21.4688C4.7688 21.4688 5.55722 20.8823 5.86278 20.0625H6.56359C7.39141 20.0625 8.0625 19.3914 8.0625 18.5636V14.8125H11.0625V18.2191C10.1566 18.6058 9.56716 19.5951 9.8016 20.6808C9.97599 21.4884 10.6307 22.1393 11.4391 22.31C12.8312 22.604 14.0625 21.5448 14.0625 20.2031C14.0625 19.2429 13.4315 18.4281 12.5625 18.1498V14.8125H15.5625V18.5607C15.5625 19.3901 16.2349 20.0625 17.0643 20.0625H17.8125C17.8578 20.0625 17.9017 20.0569 17.9448 20.0492C18.2468 20.876 19.0387 21.4688 19.9687 21.4688C21.3101 21.4688 22.3691 20.2381 22.0758 18.8464C21.9033 18.0273 21.237 17.3678 20.4166 17.2017ZM3.84375 19.9688C3.48193 19.9688 3.1875 19.6743 3.1875 19.3125C3.1875 18.9507 3.48193 18.6563 3.84375 18.6563C4.20556 18.6563 4.5 18.9507 4.5 19.3125C4.5 19.6743 4.20556 19.9688 3.84375 19.9688ZM11.9062 20.8594C11.5444 20.8594 11.25 20.565 11.25 20.2031C11.25 19.8413 11.5444 19.5469 11.9062 19.5469C12.2681 19.5469 12.5625 19.8413 12.5625 20.2031C12.5625 20.565 12.2681 20.8594 11.9062 20.8594ZM19.9687 19.9688C19.6069 19.9688 19.3125 19.6743 19.3125 19.3125C19.3125 18.9507 19.6069 18.6563 19.9687 18.6563C20.3306 18.6563 20.625 18.9507 20.625 19.3125C20.625 19.6743 20.3306 19.9688 19.9687 19.9688Z" fill="#1E1E20"/>
+</svg>

package/dist/icon-DZLmaPll.mjs

@@ -1,85 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-function a(r) {
-  return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, "default") ? r.default : r;
-}
-var p = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-(function(r) {
-  (function() {
-    var e = {}.hasOwnProperty;
-    function o() {
-      for (var t = "", n = 0; n < arguments.length; n++) {
-        var s = arguments[n];
-        s && (t = i(t, u.call(this, s)));
-      }
-      return t;
-    }
-    function u(t) {
-      if (typeof t == "string" || typeof t == "number")
-        return this && this[t] || t;
-      if (typeof t != "object")
-        return "";
-      if (Array.isArray(t))
-        return o.apply(this, t);
-      if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
-        return t.toString();
-      var n = "";
-      for (var s in t)
-        e.call(t, s) && t[s] && (n = i(n, this && this[s] || s));
-      return n;
-    }
-    function i(t, n) {
-      return n ? t ? t + " " + n : t + n : t;
-    }
-    r.exports ? (o.default = o, r.exports = o) : window.classNames = o;
-  })();
-})(p);
-var f = p.exports;
-const m = /* @__PURE__ */ a(f), _ = {
-  "purpur-icon": "_purpur-icon_8u1lq_1",
-  "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
-  "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
-  "purpur-icon--sm": "_purpur-icon--sm_8u1lq_12",
-  "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
-  "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
-  "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, d = m.bind(_), c = "purpur-icon", v = "md", g = (r) => r.filter((e) => Object.keys(e).length >= 1).map((e) => `${e.name}="${e.value}"`).join(" "), x = ({ content: r = "", title: e } = {}) => {
-  const o = [
-    { name: "xmlns", value: "http://www.w3.org/2000/svg" },
-    { name: "fill", value: "currentColor" },
-    { name: "viewBox", value: "0 0 24 24" },
-    e ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
-  ], u = e ? `<title>${e}</title>` : "";
-  return `<svg ${g(o)}>${u}${r}</svg>`;
-}, h = (r) => r.replace(/<(\/?)svg([^>]*)>/g, "").trim(), b = ({
-  ["data-testid"]: r,
-  svg: e,
-  allyTitle: o,
-  className: u,
-  size: i = v,
-  ...t
-}) => {
-  const n = x({
-    content: h(e.svg),
-    title: o
-  }), s = d(u, c, `${c}--${i}`);
-  return /* @__PURE__ */ l(
-    "span",
-    {
-      "aria-label": o,
-      className: s,
-      "data-testid": r,
-      dangerouslySetInnerHTML: { __html: n },
-      ...t
-    }
-  );
-};
-b.displayName = "Icon";
-export {
-  b as I
-};
-//# sourceMappingURL=icon-DZLmaPll.mjs.map

package/dist/icon-Dwry20Kn.js

@@ -1,6 +0,0 @@
-"use strict";const a=require("react/jsx-runtime");function f(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var p={exports:{}};/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(r){(function(){var e={}.hasOwnProperty;function s(){for(var t="",n=0;n<arguments.length;n++){var o=arguments[n];o&&(t=i(t,u.call(this,o)))}return t}function u(t){if(typeof t=="string"||typeof t=="number")return this&&this[t]||t;if(typeof t!="object")return"";if(Array.isArray(t))return s.apply(this,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var n="";for(var o in t)e.call(t,o)&&t[o]&&(n=i(n,this&&this[o]||o));return n}function i(t,n){return n?t?t+" "+n:t+n:t}r.exports?(s.default=s,r.exports=s):window.classNames=s})()})(p);var _=p.exports;const m=f(_),d={"purpur-icon":"_purpur-icon_8u1lq_1","purpur-icon--xxs":"_purpur-icon--xxs_8u1lq_4","purpur-icon--xs":"_purpur-icon--xs_8u1lq_8","purpur-icon--sm":"_purpur-icon--sm_8u1lq_12","purpur-icon--md":"_purpur-icon--md_8u1lq_16","purpur-icon--lg":"_purpur-icon--lg_8u1lq_20","purpur-icon--xl":"_purpur-icon--xl_8u1lq_24"},v=m.bind(d),c="purpur-icon",g="md",x=r=>r.filter(e=>Object.keys(e).length>=1).map(e=>`${e.name}="${e.value}"`).join(" "),h=({content:r="",title:e}={})=>{const s=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},{name:"viewBox",value:"0 0 24 24"},e?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],u=e?`<title>${e}</title>`:"";return`<svg ${x(s)}>${u}${r}</svg>`},b=r=>r.replace(/<(\/?)svg([^>]*)>/g,"").trim(),l=({["data-testid"]:r,svg:e,allyTitle:s,className:u,size:i=g,...t})=>{const n=h({content:b(e.svg),title:s}),o=v(u,c,`${c}--${i}`);return a.jsx("span",{"aria-label":s,className:o,"data-testid":r,dangerouslySetInnerHTML:{__html:n},...t})};l.displayName="Icon";exports.Icon=l;
-//# sourceMappingURL=icon-Dwry20Kn.js.map