@nice2dev/icons 1.3.2 → 1.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.md +122 -0
  2. package/README.md +12 -4
  3. package/dist/cjs/createIcon.js +4 -2
  4. package/dist/cjs/figmaExport.js +1 -0
  5. package/dist/cjs/iconParts.js +34 -1
  6. package/dist/cjs/icons/actions.js +85 -64
  7. package/dist/cjs/icons/business.js +65 -28
  8. package/dist/cjs/icons/education.js +37 -13
  9. package/dist/cjs/icons/files.js +58 -18
  10. package/dist/cjs/icons/index.js +1 -0
  11. package/dist/cjs/icons/media.js +87 -30
  12. package/dist/cjs/icons/navigation.js +26 -7
  13. package/dist/cjs/icons/omniverk.js +2 -1
  14. package/dist/cjs/icons/realestate.js +48 -10
  15. package/dist/cjs/icons/science.js +10 -6
  16. package/dist/cjs/icons/shapes.js +46 -12
  17. package/dist/cjs/icons/social.js +3 -9
  18. package/dist/cjs/icons/travel.js +21 -4
  19. package/dist/cjs/icons/ui.js +80 -39
  20. package/dist/cjs/icons/weather.js +5 -4
  21. package/dist/cjs/index.js +1 -0
  22. package/dist/cjs/nicetodev-icons.css +1 -1
  23. package/dist/esm/createIcon.js +4 -2
  24. package/dist/esm/figmaExport.js +1 -0
  25. package/dist/esm/iconParts.js +34 -3
  26. package/dist/esm/icons/actions.js +87 -66
  27. package/dist/esm/icons/business.js +65 -28
  28. package/dist/esm/icons/education.js +37 -13
  29. package/dist/esm/icons/files.js +58 -18
  30. package/dist/esm/icons/index.js +1 -1
  31. package/dist/esm/icons/media.js +87 -30
  32. package/dist/esm/icons/navigation.js +26 -7
  33. package/dist/esm/icons/omniverk.js +2 -1
  34. package/dist/esm/icons/realestate.js +48 -10
  35. package/dist/esm/icons/science.js +10 -6
  36. package/dist/esm/icons/shapes.js +46 -12
  37. package/dist/esm/icons/social.js +3 -9
  38. package/dist/esm/icons/travel.js +21 -4
  39. package/dist/esm/icons/ui.js +81 -41
  40. package/dist/esm/icons/weather.js +5 -4
  41. package/dist/esm/index.js +1 -1
  42. package/dist/esm/nicetodev-icons.css +1 -1
  43. package/dist/types/iconParts.d.ts +14 -1
  44. package/dist/types/icons/index.d.ts +1 -1
  45. package/dist/types/icons/ui.d.ts +1 -0
  46. package/dist/types/types.d.ts +12 -3
  47. package/package.json +2 -2
@@ -1,6 +1,6 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { createIcon } from '../createIcon.js';
3
- import { within } from '../iconParts.js';
3
+ import { bellIcon, within } from '../iconParts.js';
4
4
 
5
5
  // NtdHome: walls 9 high under a 7.5 roof (they were 10.5 and read as a tower). The corners are
6
6
  // square in every variant: the outline strokes join with miters, since the default round joins
@@ -27,21 +27,24 @@ const NtdUser = /* @__PURE__ */ createIcon({
27
27
  paths: {
28
28
  solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", fill: primaryColor })] })),
29
29
  outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
30
- duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
31
- vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: "white", opacity: "0.08" }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", fill: secondaryColor })] })),
30
+ // fills only, like vivid: the head primary, the shoulders secondary
31
+ duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", fill: secondaryColor })] })),
32
+ vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: "M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2", fill: secondaryColor })] })),
32
33
  },
33
34
  });
34
- // NtdAdmin: NtdUser in a tie — the same head and shoulders, a knot at the collar and a blade down
35
- // the chest.
35
+ // NtdAdmin: NtdUser in a tie — the same head and shoulders, a knot at the collar and a blade that
36
+ // runs down the chest to the bottom edge, cut off there (a whole short tie with its tip read
37
+ // comic).
36
38
  const ADMIN_BODY = 'M20.8 21.9v-2.2a4.4 4.4 0 00-4.4-4.4H7.6a4.4 4.4 0 00-4.4 4.4v2.2';
37
- const ADMIN_TIE = 'M10.8 15.3h2.4l-.6 1.6.8 3.2L12 21.2l-1.4-1.1.8-3.2z';
39
+ const ADMIN_TIE = 'M10.7 15.3h2.6l-.65 1.8 1.05 4.8h-3.4l1.05-4.8z';
38
40
  const NtdAdmin = /* @__PURE__ */ createIcon({
39
41
  displayName: 'NtdAdmin',
40
42
  paths: {
41
43
  solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: ADMIN_BODY, fill: primaryColor }), jsx("path", { d: ADMIN_TIE, fill: accentColor, opacity: accentOpacity })] })),
42
44
  outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: ADMIN_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: ADMIN_TIE, fill: primaryColor })] })),
43
- duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: ADMIN_BODY, fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: ADMIN_BODY, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: ADMIN_TIE, fill: primaryColor })] })),
44
- vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: "white", opacity: "0.08" }), jsx("path", { d: ADMIN_BODY, fill: secondaryColor }), jsx("path", { d: ADMIN_TIE, fill: primaryColor })] })),
45
+ // as NtdUser: fills only, the head (and the tie) primary, the shoulders secondary
46
+ duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: ADMIN_BODY, fill: secondaryColor }), jsx("path", { d: ADMIN_TIE, fill: primaryColor })] })),
47
+ vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "7.6", r: "4.4", fill: primaryColor }), jsx("path", { d: ADMIN_BODY, fill: secondaryColor }), jsx("path", { d: ADMIN_TIE, fill: primaryColor })] })),
45
48
  },
46
49
  });
47
50
  const NtdUsers = /* @__PURE__ */ createIcon({
@@ -53,13 +56,17 @@ const NtdUsers = /* @__PURE__ */ createIcon({
53
56
  vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "9", cy: "7", r: "4", fill: primaryColor }), jsx("circle", { cx: "9", cy: "7", r: "4", fill: "white", opacity: "0.08" }), jsx("path", { d: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2", fill: secondaryColor }), jsx("path", { d: "M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75", stroke: "white", strokeWidth: "1", fill: "none" })] })),
54
57
  },
55
58
  });
59
+ // NtdHeart: duotone fills the heart primary inside a secondary outline (the other way round
60
+ // before); vivid splits it down the middle — primary left, secondary right — inside an accent
61
+ // outline (it was an accent seam between the halves).
62
+ const HEART = 'M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z';
56
63
  const NtdHeart = /* @__PURE__ */ createIcon({
57
64
  displayName: 'NtdHeart',
58
65
  paths: {
59
66
  solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: primaryColor })),
60
67
  outline: ({ primaryColor, strokeWidth }) => (jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })),
61
- duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
62
- vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: primaryColor }), jsx("path", { d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z", fill: "white", opacity: "0.1" })] })),
68
+ duotone: ({ primaryColor, secondaryColor, strokeWidth }) => (jsx("path", { d: HEART, fill: primaryColor, stroke: secondaryColor, strokeWidth: strokeWidth })),
69
+ vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: HEART, fill: secondaryColor }), within(uid, 'left', jsx("rect", { x: "0", y: "0", width: "12", height: "24" }), jsx("path", { d: HEART, fill: primaryColor })), jsx("path", { d: HEART, stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity, fill: "none" })] })),
63
70
  },
64
71
  });
65
72
  const NtdStar = /* @__PURE__ */ createIcon({
@@ -71,24 +78,18 @@ const NtdStar = /* @__PURE__ */ createIcon({
71
78
  vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: primaryColor }), jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z", fill: "white", opacity: "0.1" })] })),
72
79
  },
73
80
  });
74
- const NtdBell = /* @__PURE__ */ createIcon({
75
- displayName: 'NtdBell',
76
- paths: {
77
- solid: ({ primaryColor, strokeWidth: _strokeWidth }) => (jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: primaryColor, stroke: primaryColor, strokeWidth: "1" })),
78
- outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth })] })),
79
- duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M13.73 21a2 2 0 01-3.46 0", stroke: primaryColor, strokeWidth: strokeWidth })] })),
80
- vivid: ({ primaryColor, secondaryColor: _secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: primaryColor, stroke: primaryColor, strokeWidth: "1" }), jsx("path", { d: "M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a2 2 0 01-3.46 0", fill: "white", opacity: "0.1" })] })),
81
- },
82
- });
81
+ const NtdBell = /* @__PURE__ */ bellIcon('NtdBell', false);
83
82
  const NtdEye = /* @__PURE__ */ createIcon({
84
83
  displayName: 'NtdEye',
85
84
  paths: {
86
- // the whole eye primary, the iris in the accent colour around a primary pupil (it was a
87
- // 15% tint with a primary dot)
88
- solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "3.6", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "12", r: "1.6", fill: primaryColor })] })),
85
+ // the whole eye primary, the iris a thin ring in the accent colour (r 4.5) around a large pupil
86
+ // (r 3.4) — primary here (the filled variants do not use secondary), secondary in duotone and
87
+ // vivid
88
+ solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "4.5", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "12", r: "3.4", fill: primaryColor })] })),
89
89
  outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
90
- duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: secondaryColor, opacity: secondaryOpacity }), jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("circle", { cx: "12", cy: "12", r: "3", fill: primaryColor })] })),
91
- vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor }), jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "12", r: "3.6", fill: secondaryColor }), jsx("circle", { cx: "12", cy: "12", r: "1.6", fill: primaryColor })] })),
90
+ // the eye primary, the ring in the accent colour, the pupil secondary
91
+ duotone: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "4.5", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "12", r: "3.4", fill: secondaryColor })] })),
92
+ vivid: ({ primaryColor, secondaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "4.5", fill: accentColor, opacity: accentOpacity }), jsx("circle", { cx: "12", cy: "12", r: "3.4", fill: secondaryColor })] })),
92
93
  },
93
94
  });
94
95
  const NtdEyeOff = /* @__PURE__ */ createIcon({
@@ -145,30 +146,68 @@ const NtdHelp = /* @__PURE__ */ createIcon({
145
146
  vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.08" }), jsx("circle", { cx: "12", cy: "17", r: "1", fill: secondaryColor }), jsx("path", { d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3", stroke: "white", strokeWidth: "1", fill: "none", opacity: "0.4" })] })),
146
147
  },
147
148
  });
148
- /** The hands: minute 6.8 long, hour 5.4 (were 6 and 4.5). */
149
+ /**
150
+ * The hands: minute 6.8 long, hour 5.4 (were 6 and 4.5) — twice the stroke width in every variant
151
+ * but `outline`.
152
+ */
149
153
  const CLOCK_HANDS = 'M12 5.2V12l4.83 2.41';
150
154
  const NtdClock = /* @__PURE__ */ createIcon({
151
155
  displayName: 'NtdClock',
152
156
  paths: {
153
- solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: CLOCK_HANDS, stroke: accentColor, strokeWidth: strokeWidth, opacity: accentOpacity })] })),
157
+ solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("path", { d: CLOCK_HANDS, stroke: accentColor, strokeWidth: strokeWidth * 2, opacity: accentOpacity })] })),
154
158
  outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CLOCK_HANDS, stroke: primaryColor, strokeWidth: strokeWidth })] })),
155
- duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CLOCK_HANDS, stroke: primaryColor, strokeWidth: strokeWidth })] })),
156
- vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" }), jsx("path", { d: CLOCK_HANDS, stroke: secondaryColor, strokeWidth: "1.8" })] })),
159
+ duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CLOCK_HANDS, stroke: primaryColor, strokeWidth: strokeWidth * 2 })] })),
160
+ vivid: ({ primaryColor, secondaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), jsx("circle", { cx: "12", cy: "12", r: "10", fill: "white", opacity: "0.1" }), jsx("path", { d: CLOCK_HANDS, stroke: secondaryColor, strokeWidth: strokeWidth * 2 })] })),
161
+ },
162
+ });
163
+ // NtdHourglass: two plates and the curved glass between them, the sand running from the top bulb
164
+ // (resting at the neck) through a thread onto a pile in the bottom one. Under the `turn` animation
165
+ // the sand pours while the glass holds, in step with the turns (animations.css): each bulb draws
166
+ // its sand twice — at the neck and piled on the base — both scaled from a full bulb, which the
167
+ // CSS swaps between; at rest they are drawn here part way through. Duotone and vivid: the sand
168
+ // secondary.
169
+ const HOURGLASS_PLATES = [
170
+ { x: 4, y: 2, width: 16, height: 2.5, rx: 1 },
171
+ { x: 4, y: 19.5, width: 16, height: 2.5, rx: 1 },
172
+ ];
173
+ const HOURGLASS_GLASS = 'M6.5 4.5v1.3c0 2.9 2.1 4.6 4.1 6.2-2 1.6-4.1 3.3-4.1 6.2v1.3M17.5 4.5v1.3c0 2.9-2.1 4.6-4.1 6.2 2 1.6 4.1 3.3 4.1 6.2v1.3';
174
+ /** A full bulb of sand: the top one (apex at the neck 12,11.4, base at 5.8) and the bottom one. */
175
+ const HOURGLASS_SAND_TOP = 'M8.2 5.8h7.6c0 2.3-1.5 3.9-3.8 5.6-2.3-1.7-3.8-3.3-3.8-5.6z';
176
+ const HOURGLASS_SAND_BOTTOM = 'M8.2 18.2h7.6c0-2.3-1.5-3.9-3.8-5.6-2.3 1.7-3.8 3.3-3.8 5.6z';
177
+ function hourglassSand(fill, strokeWidth) {
178
+ const part = (name) => `ntd-hourglass-sand ntd-hourglass-sand--${name}`;
179
+ return (jsxs(Fragment, { children: [jsx("path", { className: part('top-neck'), d: HOURGLASS_SAND_TOP, fill: fill, transform: "translate(12 11.4) scale(0.6) translate(-12 -11.4)" }), jsx("path", { className: part('top-base'), d: HOURGLASS_SAND_TOP, fill: fill, transform: "scale(0)" }), jsx("path", { className: part('bottom-neck'), d: HOURGLASS_SAND_BOTTOM, fill: fill, transform: "scale(0)" }), jsx("path", { className: part('bottom-base'), d: HOURGLASS_SAND_BOTTOM, fill: fill, transform: "translate(0 18.2) scale(1 0.45) translate(0 -18.2)" }), jsx("path", { className: part('stream-up'), d: "M12 11.6V6.4", stroke: fill, strokeWidth: strokeWidth * 0.5, opacity: "0" }), jsx("path", { className: part('stream-down'), d: "M12 12.4V17.6", stroke: fill, strokeWidth: strokeWidth * 0.5 })] }));
180
+ }
181
+ function hourglassFilled(frame, sand, strokeWidth) {
182
+ return (jsxs(Fragment, { children: [HOURGLASS_PLATES.map((p) => (jsx("rect", { ...p, fill: frame }, p.y))), jsx("path", { d: HOURGLASS_GLASS, stroke: frame, strokeWidth: strokeWidth, fill: "none" }), hourglassSand(sand, strokeWidth)] }));
183
+ }
184
+ const NtdHourglass = /* @__PURE__ */ createIcon({
185
+ displayName: 'NtdHourglass',
186
+ paths: {
187
+ solid: ({ primaryColor, strokeWidth }) => hourglassFilled(primaryColor, primaryColor, strokeWidth),
188
+ outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: `M4.5 3.25h15M4.5 20.75h15${HOURGLASS_GLASS}`, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), hourglassSand(primaryColor, strokeWidth)] })),
189
+ duotone: ({ primaryColor, secondaryColor, strokeWidth }) => hourglassFilled(primaryColor, secondaryColor, strokeWidth),
190
+ vivid: ({ primaryColor, secondaryColor, strokeWidth }) => hourglassFilled(primaryColor, secondaryColor, strokeWidth),
157
191
  },
158
192
  });
159
193
  // The binder rings are 1.6x the stroke wide; the header line is a cut across the page, kept
160
- // inside it so it meets the sides flush (its round caps stuck out of both).
161
- const CALENDAR_HEAD = 'M5 4h14a2 2 0 012 2v4H3V6a2 2 0 012-2z';
162
- const CALENDAR_SHEET = 'M3 10h18v10a2 2 0 01-2 2H5a2 2 0 01-2-2z';
194
+ // inside it so it meets the sides flush (its round caps stuck out of both). Filled — solid and
195
+ // duotone alike — the header and the rings are secondary over a primary sheet, the line between
196
+ // them in the accent colour. The header is a plain band clipped to the page, so `sharp` and
197
+ // `rounded` (which re-shape the page's `<rect>`) square or round its top corners with the page's.
198
+ const CALENDAR_PAGE = { x: 3, y: 4, width: 18, height: 18, rx: 2 };
199
+ const CALENDAR_HEAD_BAND = 'M3 4h18v5.5H3z';
200
+ const CALENDAR_RINGS = 'M16 2v4M8 2v4';
201
+ function calendarFilled({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid, }) {
202
+ return (jsxs(Fragment, { children: [jsx("rect", { ...CALENDAR_PAGE, fill: primaryColor }), within(uid, 'header', jsx("rect", { ...CALENDAR_PAGE }), jsxs(Fragment, { children: [jsx("path", { d: CALENDAR_HEAD_BAND, fill: secondaryColor }), jsx("path", { d: "M3 9.5h18", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity })] })), jsx("path", { d: CALENDAR_RINGS, stroke: secondaryColor, strokeWidth: strokeWidth * 1.6 })] }));
203
+ }
163
204
  const NtdCalendar = /* @__PURE__ */ createIcon({
164
205
  displayName: 'NtdCalendar',
165
206
  paths: {
166
- solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: primaryColor }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), within(uid, 'header', jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }))] })),
167
- outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: primaryColor, strokeWidth: strokeWidth })] })),
168
- // fills only: the header and the rings primary, the sheet secondary, the line between them
169
- // in the accent colour
170
- duotone: ({ primaryColor, secondaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("path", { d: CALENDAR_SHEET, fill: secondaryColor }), jsx("path", { d: CALENDAR_HEAD, fill: primaryColor }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), within(uid, 'header', jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: accentColor, strokeWidth: "1.5", opacity: accentOpacity }))] })),
171
- vivid: ({ primaryColor, secondaryColor, uid }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: primaryColor }), jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", fill: "white", opacity: "0.1" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: secondaryColor, strokeWidth: "2.9" }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: secondaryColor, strokeWidth: "2.9" }), within(uid, 'header', jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: secondaryColor, strokeWidth: "1.5" }))] })),
207
+ solid: calendarFilled,
208
+ outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: CALENDAR_RINGS, stroke: primaryColor, strokeWidth: strokeWidth * 1.6 }), jsx("path", { d: "M3 9.5h18", stroke: primaryColor, strokeWidth: strokeWidth })] })),
209
+ duotone: calendarFilled,
210
+ vivid: calendarFilled,
172
211
  },
173
212
  });
174
213
  const NtdTag = /* @__PURE__ */ createIcon({
@@ -247,11 +286,12 @@ const NtdGlobe = /* @__PURE__ */ createIcon({
247
286
  displayName: 'NtdGlobe',
248
287
  paths: {
249
288
  // a filled globe with its grid in the accent colour, kept inside the disc (it was the
250
- // outline's rings, unfilled)
251
- solid: ({ primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), within(uid, 'grid', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: GLOBE_GRID, stroke: accentColor, strokeWidth: strokeWidth * 0.75, opacity: accentOpacity, fill: "none" }))] })),
289
+ // outline's rings, unfilled). The grid is 1.5x the stroke in the filled variants, but stays
290
+ // at 0.75x in the cutout, which is drawn from this layer too.
291
+ solid: ({ variant, primaryColor, accentColor, accentOpacity, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), within(uid, 'grid', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: GLOBE_GRID, stroke: accentColor, strokeWidth: strokeWidth * (variant === 'cutout' ? 0.75 : 1.5), opacity: accentOpacity, fill: "none" }))] })),
252
292
  outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
253
293
  duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: secondaryColor, opacity: secondaryOpacity }), jsx("circle", { cx: "12", cy: "12", r: "10", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: "M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z", stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" })] })),
254
- vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), within(uid, 'grid', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: GLOBE_GRID, stroke: secondaryColor, strokeWidth: strokeWidth * 0.75, fill: "none" }))] })),
294
+ vivid: ({ primaryColor, secondaryColor, strokeWidth, uid }) => (jsxs(Fragment, { children: [jsx("circle", { cx: "12", cy: "12", r: "10", fill: primaryColor }), within(uid, 'grid', jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: GLOBE_GRID, stroke: secondaryColor, strokeWidth: strokeWidth * 1.5, fill: "none" }))] })),
255
295
  },
256
296
  });
257
297
  const NtdMap = /* @__PURE__ */ createIcon({
@@ -310,4 +350,4 @@ const NtdWireframe = /* @__PURE__ */ createIcon({
310
350
  },
311
351
  });
312
352
 
313
- export { NtdAdmin, NtdBackspace, NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdInfo, NtdMap, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe };
353
+ export { NtdAdmin, NtdBackspace, NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdHourglass, NtdInfo, NtdMap, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe };
@@ -1,5 +1,6 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { createIcon } from '../createIcon.js';
3
+ import { detailColor } from '../iconParts.js';
3
4
 
4
5
  const NtdSunrise = /* @__PURE__ */ createIcon({
5
6
  displayName: 'NtdSunrise',
@@ -117,18 +118,18 @@ const NtdTree = /* @__PURE__ */ createIcon({
117
118
  },
118
119
  });
119
120
  // NtdMountain: a snowcap that follows the slopes down to an edge with three uneven notches, like a
120
- // price chart (it had two even ones). The snow is in the accent colour, in secondary in duotone
121
- // and vivid; the outline draws the snow line too.
121
+ // price chart (it had two even ones). The snow is secondary — in the accent colour, which is the
122
+ // page colour by default, it did not show; the outline draws the snow line too.
122
123
  const MOUNTAIN = 'M12 2L2 22h20L12 2z';
123
124
  const MOUNTAIN_SNOW = 'M12 2L15 8L14 10.2L13.1 9.4L11.9 11L10.6 9.1L9.5 10.4L8.4 9.2Z';
124
125
  const MOUNTAIN_SNOW_LINE = 'M8.4 9.2L9.5 10.4L10.6 9.1L11.9 11L13.1 9.4L14 10.2L15 8';
125
126
  const NtdMountain = /* @__PURE__ */ createIcon({
126
127
  displayName: 'NtdMountain',
127
128
  paths: {
128
- solid: ({ primaryColor, accentColor, accentOpacity }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: primaryColor }), jsx("path", { d: MOUNTAIN_SNOW, fill: accentColor, opacity: accentOpacity })] })),
129
+ solid: (props) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: props.primaryColor }), jsx("path", { d: MOUNTAIN_SNOW, fill: detailColor(props) })] })),
129
130
  outline: ({ primaryColor, strokeWidth }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, stroke: primaryColor, strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: MOUNTAIN_SNOW_LINE, stroke: primaryColor, strokeWidth: strokeWidth * 0.8, fill: "none" })] })),
130
131
  duotone: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: primaryColor }), jsx("path", { d: MOUNTAIN_SNOW, fill: secondaryColor })] })),
131
- vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: primaryColor }), jsx("path", { d: MOUNTAIN, fill: "white", opacity: "0.08" }), jsx("path", { d: MOUNTAIN_SNOW, fill: secondaryColor })] })),
132
+ vivid: ({ primaryColor, secondaryColor }) => (jsxs(Fragment, { children: [jsx("path", { d: MOUNTAIN, fill: primaryColor }), jsx("path", { d: MOUNTAIN_SNOW, fill: secondaryColor })] })),
132
133
  },
133
134
  });
134
135
  const NtdWave = /* @__PURE__ */ createIcon({
package/dist/esm/index.js CHANGED
@@ -6,7 +6,7 @@ export { AnimationController, InteractiveIcon, AnimationController as NiceAnimat
6
6
  export { batchExportIcons, copyIconToClipboard, downloadIconAsPng, downloadIconAsSvg, exportIconToDataUrl, exportIconToFigmaNode, exportIconToSvgString, generateFigmaPluginManifest } from './figmaExport.js';
7
7
  export { NtdArrowDown, NtdArrowLeft, NtdArrowRight, NtdArrowUp, NtdChevronDown, NtdChevronLeft, NtdChevronRight, NtdChevronUp, NtdClose, NtdExternalLink, NtdMenu, NtdMoreHorizontal, NtdMoreVertical, NtdRefresh } from './icons/navigation.js';
8
8
  export { NtdCheck, NtdClipboard, NtdCopy, NtdDownload, NtdEdit, NtdEditDetail, NtdFilter, NtdGroup, NtdLink, NtdLock, NtdLogIn, NtdLogOut, NtdMinus, NtdPlus, NtdPrint, NtdRedo, NtdReply, NtdSave, NtdSearch, NtdSettings, NtdShare, NtdSort, NtdTrash, NtdUndo, NtdUngroup, NtdUnlock, NtdUpload, NtdZoomIn, NtdZoomOut } from './icons/actions.js';
9
- export { NtdAdmin, NtdBackspace, NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdInfo, NtdMap, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe } from './icons/ui.js';
9
+ export { NtdAdmin, NtdBackspace, NtdBell, NtdBookmark, NtdCalendar, NtdClock, NtdCursor, NtdError, NtdEye, NtdEyeOff, NtdFlag, NtdGlobe, NtdHeart, NtdHelp, NtdHome, NtdHourglass, NtdInfo, NtdMap, NtdMoon, NtdPin, NtdShield, NtdStar, NtdSuccess, NtdSun, NtdTag, NtdThumbDown, NtdThumbUp, NtdUser, NtdUsers, NtdWarning, NtdWireframe } from './icons/ui.js';
10
10
  export { NtdBiodegradable, NtdCarbonFootprint, NtdCo2, NtdCompost, NtdEcoFriendly, NtdEvCharger, NtdHydropower, NtdNetZero, NtdOrganic, NtdPlantTree, NtdRecycle, NtdSolarPanel, NtdTrashSort, NtdWildlife, NtdWindTurbine, sustainabilityIcons } from './icons/sustainability.js';
11
11
  export { NtdAccessibility, NtdAssistiveTech, NtdAudioDescription, NtdBlind, NtdBraille, NtdClosedCaptions, NtdDeaf, NtdDyslexia, NtdEasyRead, NtdHearingAid, NtdScreenReader, NtdSignLanguage, NtdWheelchair, accessibilityIcons } from './icons/accessibility.js';
12
12
  export { NtdAudit, NtdCcpa, NtdCertified, NtdCompliance, NtdContract, NtdCookieConsent, NtdCopyright, NtdGdpr, NtdLegalDocument, NtdPatent, NtdPrivacyPolicy, NtdTermsOfService, NtdTrademark, legalIcons } from './icons/legal.js';
@@ -1 +1 @@
1
- .ntd-icon{display:inline-block;flex-shrink:0;transition:color .2s ease,transform .2s ease;vertical-align:-.125em}.ntd-anim-spin{animation:ntd-spin 1s linear infinite}.ntd-anim-spin-reverse{animation:ntd-spin 1s linear infinite reverse}@keyframes ntd-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ntd-anim-pulse{animation:ntd-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes ntd-pulse{0%,to{opacity:1}50%{opacity:.4}}.ntd-anim-bounce{animation:ntd-bounce 1s ease infinite}@keyframes ntd-bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(0)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(-25%)}}.ntd-anim-shake{animation:ntd-shake .6s ease-in-out infinite}@keyframes ntd-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-2px)}20%,40%,60%,80%{transform:translateX(2px)}}.ntd-anim-float{animation:ntd-float 3s ease-in-out infinite}@keyframes ntd-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.ntd-anim-flip{animation:ntd-flip 1.2s ease-in-out infinite}@keyframes ntd-flip{0%{transform:perspective(400px) rotateY(0)}40%{transform:perspective(400px) rotateY(170deg)}50%{transform:perspective(400px) rotateY(190deg)}80%{transform:perspective(400px) rotateY(1turn)}to{transform:perspective(400px) rotateY(1turn)}}.ntd-anim-glow{animation:ntd-glow 2s ease-in-out infinite}@keyframes ntd-glow{0%,to{filter:drop-shadow(0 0 2px currentColor)}50%{filter:drop-shadow(0 0 12px currentColor) drop-shadow(0 0 20px currentColor)}}.ntd-anim-wiggle{animation:ntd-wiggle 1s ease-in-out infinite}@keyframes ntd-wiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.ntd-anim-rubber{animation:ntd-rubber 1s ease-in-out infinite}@keyframes ntd-rubber{0%{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scale(1)}}.ntd-anim-swing{animation:ntd-swing 1s ease-in-out infinite;transform-origin:top center}@keyframes ntd-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.ntd-anim-tada{animation:ntd-tada 1.2s ease-in-out infinite}@keyframes ntd-tada{0%{transform:scale(1) rotate(0deg)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0deg)}}.ntd-anim-heartbeat{animation:ntd-heartbeat 1.2s ease-in-out infinite}@keyframes ntd-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.ntd-anim-fade-in{animation:ntd-fade-in .5s ease-out forwards}@keyframes ntd-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ntd-anim-slide-up{animation:ntd-slide-up .4s ease-out forwards}@keyframes ntd-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-jello{animation:ntd-jello 1s ease-in-out infinite}@keyframes ntd-jello{0%,to{transform:skewX(0deg) skewY(0deg)}11.1%{transform:skewX(-12.5deg) skewY(-12.5deg)}22.2%{transform:skewX(6.25deg) skewY(6.25deg)}33.3%{transform:skewX(-3.125deg) skewY(-3.125deg)}44.4%{transform:skewX(1.5625deg) skewY(1.5625deg)}55.5%{transform:skewX(-.78125deg) skewY(-.78125deg)}66.6%{transform:skewX(.390625deg) skewY(.390625deg)}77.7%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.ntd-anim-pop{animation:ntd-pop .6s ease-out infinite}@keyframes ntd-pop{0%{transform:scale(1)}15%{transform:scale(1.35)}30%{transform:scale(.9)}45%{transform:scale(1.1)}60%{transform:scale(.97)}75%{transform:scale(1.03)}to{transform:scale(1)}}.ntd-anim-squeeze{animation:ntd-squeeze 1.4s ease-in-out infinite}@keyframes ntd-squeeze{0%,to{transform:scaleX(1) scaleY(1)}25%{transform:scaleX(.7) scaleY(1.3)}50%{transform:scaleX(1) scaleY(1)}75%{transform:scaleX(1.3) scaleY(.7)}}.ntd-anim-drop{animation:ntd-drop .8s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-drop{0%{opacity:0;transform:translateY(-40px) scale(.8)}60%{opacity:1;transform:translateY(4px) scale(1.05)}75%{transform:translateY(-2px) scale(.98)}90%{transform:translateY(1px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-rise{animation:ntd-rise .7s cubic-bezier(.16,1,.3,1) forwards}@keyframes ntd-rise{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-slide-left{animation:ntd-slide-left .5s ease-out forwards}@keyframes ntd-slide-left{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-right{animation:ntd-slide-right .5s ease-out forwards}@keyframes ntd-slide-right{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-down{animation:ntd-slide-down .4s ease-out forwards}@keyframes ntd-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-roll-in{animation:ntd-roll-in .8s ease-out forwards}@keyframes ntd-roll-in{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}to{opacity:1;transform:translateX(0) rotate(0deg)}}.ntd-anim-flash{animation:ntd-flash 1s ease-in-out infinite}@keyframes ntd-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.ntd-anim-vibrate{animation:ntd-vibrate .3s linear infinite}@keyframes ntd-vibrate{0%{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}to{transform:translate(0)}}.ntd-anim-wobble{animation:ntd-wobble 1.2s ease-in-out infinite}@keyframes ntd-wobble{0%{transform:translateX(0) rotate(0deg)}15%{transform:translateX(-15%) rotate(-5deg)}30%{transform:translateX(10%) rotate(3deg)}45%{transform:translateX(-10%) rotate(-3deg)}60%{transform:translateX(5%) rotate(2deg)}75%{transform:translateX(-3%) rotate(-1deg)}to{transform:translateX(0) rotate(0deg)}}.ntd-anim-spiral{animation:ntd-spiral 2s linear infinite}@keyframes ntd-spiral{0%{transform:rotate(0deg) scale(.8)}25%{transform:rotate(90deg) scale(1.1)}50%{transform:rotate(180deg) scale(.8)}75%{transform:rotate(270deg) scale(1.1)}to{transform:rotate(1turn) scale(.8)}}.ntd-anim-ping{animation:ntd-ping 1.5s ease-out infinite}@keyframes ntd-ping{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.6)}71%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}.ntd-anim-flicker{animation:ntd-flicker 1.5s steps(1) infinite}@keyframes ntd-flicker{0%{opacity:1}4%{opacity:.3}8%{opacity:1}12%{opacity:.6}16%{opacity:1}20%{opacity:.2}22%{opacity:1}50%{opacity:1}52%{opacity:.4}54%{opacity:1}80%{opacity:1}82%{opacity:.3}85%{opacity:1}90%{opacity:.5}92%{opacity:1}}.ntd-anim-tilt{animation:ntd-tilt 2s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-tilt{0%,to{transform:rotate(0deg)}25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}.ntd-anim-breathe{animation:ntd-breathe 4s ease-in-out infinite}@keyframes ntd-breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}.ntd-anim-drift{animation:ntd-drift 4s ease-in-out infinite}@keyframes ntd-drift{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(5px) rotate(1deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-5px) rotate(-1deg)}}.ntd-anim-orbit{animation:ntd-orbit 3s linear infinite}@keyframes ntd-orbit{0%{transform:translate(0)}25%{transform:translate(4px,-4px)}50%{transform:translateY(-6px)}75%{transform:translate(-4px,-4px)}to{transform:translate(0)}}.ntd-anim-crush{animation:ntd-crush .8s ease-in-out infinite}@keyframes ntd-crush{0%,to{transform:scaleY(1) scaleX(1)}40%{transform:scaleY(.3) scaleX(1.3)}60%{transform:scaleY(1.15) scaleX(.9)}80%{transform:scaleY(.95) scaleX(1.02)}}.ntd-anim-stretch{animation:ntd-stretch 1s ease-in-out infinite}@keyframes ntd-stretch{0%,to{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.4) scaleX(.8)}50%{transform:scaleY(.85) scaleX(1.1)}70%{transform:scaleY(1.1) scaleX(.95)}}.ntd-anim-dissolve{animation:ntd-dissolve 2s ease-in-out infinite}@keyframes ntd-dissolve{0%,to{filter:blur(0);opacity:1}50%{filter:blur(4px);opacity:.1}}.ntd-anim-materialize{animation:ntd-materialize .8s ease-out forwards}@keyframes ntd-materialize{0%{filter:blur(8px);opacity:0;transform:scale(.6)}60%{filter:blur(1px);opacity:.8;transform:scale(1.05)}to{filter:blur(0);opacity:1;transform:scale(1)}}.ntd-anim-sway{animation:ntd-sway 2.5s ease-in-out infinite;transform-origin:top center}@keyframes ntd-sway{0%,to{transform:rotate(0deg)}20%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}.ntd-anim-tremble{animation:ntd-tremble .15s linear infinite}@keyframes ntd-tremble{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(-.5px,.5px) rotate(-.5deg)}50%{transform:translate(.5px,-.5px) rotate(.5deg)}75%{transform:translate(-.5px,-.5px) rotate(-.5deg)}to{transform:translate(0) rotate(0deg)}}.ntd-anim-rock{animation:ntd-rock 1.5s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-rock{0%,to{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}.ntd-anim-snap{animation:ntd-snap 1.5s ease-in-out infinite}@keyframes ntd-snap{0%,30%{transform:rotate(0deg)}50%{transform:rotate(190deg)}55%{transform:rotate(175deg)}60%{transform:rotate(182deg)}65%,to{transform:rotate(180deg)}}.ntd-anim-warp{animation:ntd-warp 2s ease-in-out infinite}@keyframes ntd-warp{0%,to{transform:perspective(300px) rotateX(0deg) rotateY(0deg)}25%{transform:perspective(300px) rotateX(10deg) rotateY(10deg)}50%{transform:perspective(300px) rotateX(-5deg) rotateY(-10deg)}75%{transform:perspective(300px) rotateX(8deg) rotateY(-5deg)}}.ntd-anim-glitch{animation:ntd-glitch .8s steps(1) infinite}@keyframes ntd-glitch{0%{transform:translate(0)}5%{transform:translate(-3px,2px) skewX(2deg)}10%{transform:translate(3px,-1px) skewX(-1deg)}15%{transform:translate(0)}40%{transform:translate(0)}42%{transform:translate(2px,1px) skewX(-3deg)}44%{transform:translate(-2px,-2px) skewX(1deg)}46%{transform:translate(0)}70%{transform:translate(0)}72%{transform:translate(-1px,3px) skewX(2deg)}74%{transform:translate(1px,-1px)}76%{transform:translate(0)}to{transform:translate(0)}}.ntd-anim-zoom-pulse{animation:ntd-zoom-pulse 1.5s ease-in-out infinite}@keyframes ntd-zoom-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.ntd-anim-ripple{animation:ntd-ripple 1.6s ease-out infinite}@keyframes ntd-ripple{0%{opacity:1;transform:scale(1)}30%{opacity:.8;transform:scale(1.15)}50%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.ntd-anim-implode{animation:ntd-implode 1.2s ease-in-out infinite}@keyframes ntd-implode{0%,to{opacity:1;transform:scale(1)}40%{opacity:.3;transform:scale(.2) rotate(20deg)}60%{opacity:.2;transform:scale(.15) rotate(25deg)}80%{opacity:1;transform:scale(1.1) rotate(0deg)}}.ntd-anim-explode{animation:ntd-explode 1.4s ease-in-out infinite}@keyframes ntd-explode{0%,to{opacity:1;transform:scale(1)}30%{opacity:.6;transform:scale(1.8)}50%{opacity:0;transform:scale(2)}51%{opacity:0;transform:scale(.5)}70%{opacity:.8;transform:scale(1.1)}85%{opacity:1;transform:scale(.95)}}.ntd-anim-rotate-x{animation:ntd-rotate-x 1.5s ease-in-out infinite}@keyframes ntd-rotate-x{0%{transform:perspective(400px) rotateX(0deg)}to{transform:perspective(400px) rotateX(1turn)}}.ntd-anim-morph{animation:ntd-morph 3s ease-in-out infinite}@keyframes ntd-morph{0%,to{border-radius:0;transform:scaleX(1) scaleY(1) rotate(0deg)}20%{transform:scaleX(1.1) scaleY(.9) rotate(2deg)}40%{transform:scaleX(.9) scaleY(1.1) rotate(-1deg)}60%{transform:scaleX(1.05) scaleY(.95) rotate(1deg)}80%{transform:scaleX(.95) scaleY(1.05) rotate(-2deg)}}.ntd-anim-levitate{animation:ntd-levitate 3s ease-in-out infinite}@keyframes ntd-levitate{0%,to{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));transform:translateY(0)}50%{filter:drop-shadow(0 12px 8px rgba(0,0,0,.1));transform:translateY(-10px)}}.ntd-anim-dash{animation:ntd-dash .8s ease-in-out infinite}@keyframes ntd-dash{0%,to{opacity:1;transform:translateX(0) scaleX(1)}30%{opacity:.8;transform:translateX(-3px) scaleX(.9)}60%{opacity:.6;transform:translateX(15px) scaleX(1.15)}80%{opacity:.9;transform:translateX(2px) scaleX(1)}}.ntd-anim-twist{animation:ntd-twist 1.5s ease-in-out infinite}@keyframes ntd-twist{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(30deg) scale(.9)}50%{transform:rotate(0deg) scale(1.05)}75%{transform:rotate(-30deg) scale(.9)}}.ntd-anim-stomp{animation:ntd-stomp 1s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-stomp{0%,to{transform:translateY(0) scaleY(1) scaleX(1)}20%{transform:translateY(-15px) scaleY(1.1) scaleX(.95)}50%{transform:translateY(0) scaleY(.7) scaleX(1.2)}65%{transform:translateY(-3px) scaleY(1.05) scaleX(.98)}80%{transform:translateY(0) scaleY(.95) scaleX(1.03)}}.ntd-anim-flap{animation:ntd-flap .6s ease-in-out infinite}@keyframes ntd-flap{0%,to{transform:perspective(400px) rotateX(0deg) translateY(0)}50%{transform:perspective(400px) rotateX(25deg) translateY(-5px)}}.ntd-anim-skate{animation:ntd-skate 2s ease-in-out infinite}@keyframes ntd-skate{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(8px) rotate(2deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-8px) rotate(-2deg)}}.ntd-anim-blink{animation:ntd-blink 1.4s steps(1) infinite}@keyframes ntd-blink{0%,49%{opacity:1}50%,99%{opacity:0}}.ntd-anim-reveal{animation:ntd-reveal 1s ease-out forwards}@keyframes ntd-reveal{0%{clip-path:circle(0 at 50% 50%);opacity:.5}to{clip-path:circle(75% at 50% 50%);opacity:1}}.ntd-anim-vortex{animation:ntd-vortex .8s ease-out forwards}@keyframes ntd-vortex{0%{opacity:0;transform:rotate(-540deg) scale(0)}60%{opacity:1;transform:rotate(20deg) scale(1.1)}80%{transform:rotate(-10deg) scale(.95)}to{opacity:1;transform:rotate(0deg) scale(1)}}.ntd-anim-meteor{animation:ntd-meteor .7s ease-out forwards}@keyframes ntd-meteor{0%{opacity:0;transform:translate(30px,-30px) rotate(15deg) scale(.5)}70%{opacity:1;transform:translate(-2px,2px) rotate(-2deg) scale(1.05)}to{opacity:1;transform:translate(0) rotate(0deg) scale(1)}}.ntd-anim-scale-in{animation:ntd-scale-in .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.ntd-anim-scale-out{animation:ntd-scale-out .4s ease-in forwards}@keyframes ntd-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.ntd-anim-pendulum{animation:ntd-pendulum 2s ease-in-out infinite;transform-origin:top center}@keyframes ntd-pendulum{0%{transform:rotate(0deg)}25%{transform:rotate(25deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-25deg)}to{transform:rotate(0deg)}}.ntd-anim-surge{animation:ntd-surge 1.5s ease-in-out infinite}@keyframes ntd-surge{0%,to{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}15%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);transform:scale(1.2)}30%{filter:drop-shadow(0 0 2px currentColor);transform:scale(.95)}45%{filter:drop-shadow(0 0 6px currentColor);transform:scale(1.1)}60%{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}}.ntd-anim-radar{animation:ntd-radar 2s linear infinite}@keyframes ntd-radar{0%{opacity:1;transform:rotate(0deg)}50%{opacity:.4}to{opacity:1;transform:rotate(1turn)}}.ntd-anim-typewriter{animation:ntd-typewriter 1s steps(12) forwards}@keyframes ntd-typewriter{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.ntd-anim-unfold{animation:ntd-unfold .7s ease-out forwards}@keyframes ntd-unfold{0%{opacity:.3;transform:scaleY(.05) scaleX(1.3)}50%{opacity:.9;transform:scaleY(1.1) scaleX(.95)}70%{opacity:1;transform:scaleY(.95) scaleX(1.02)}to{opacity:1;transform:scaleY(1) scaleX(1)}}.ntd-anim-fold{animation:ntd-fold .6s ease-in forwards}@keyframes ntd-fold{0%{opacity:1;transform:scaleY(1) scaleX(1)}to{opacity:0;transform:scaleY(.05) scaleX(1.3)}}.ntd-anim-scatter{animation:ntd-scatter 1.5s ease-in-out infinite}@keyframes ntd-scatter{0%,to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}20%{filter:blur(2px);opacity:.6;transform:scale(1.3) rotate(5deg)}40%{filter:blur(4px);opacity:.2;transform:scale(1.5) rotate(-3deg)}50%{filter:blur(6px);opacity:0;transform:scale(.8) rotate(0deg)}65%{filter:blur(3px);opacity:.3;transform:scale(.6) rotate(-5deg)}80%{filter:blur(1px);opacity:.8;transform:scale(.95) rotate(2deg)}}.ntd-anim-assemble{animation:ntd-assemble 1s ease-out forwards}@keyframes ntd-assemble{0%{filter:blur(8px);opacity:0;transform:scale(2) rotate(15deg)}30%{filter:blur(3px);opacity:.5;transform:scale(.8) rotate(-5deg)}60%{filter:blur(1px);opacity:.9;transform:scale(1.1) rotate(2deg)}80%{filter:blur(0);opacity:1;transform:scale(.97) rotate(-1deg)}to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}}.ntd-anim-neon{animation:ntd-neon 2s ease-in-out infinite}@keyframes ntd-neon{0%,to{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}10%{filter:drop-shadow(0 0 0 currentColor);opacity:.4}11%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}15%{filter:drop-shadow(0 0 0 currentColor);opacity:.3}16%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}50%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor) drop-shadow(0 0 24px currentColor);opacity:1}}.ntd-anim-earthquake{animation:ntd-earthquake .5s ease-in-out infinite}@keyframes ntd-earthquake{0%,to{transform:translate(0)}10%{transform:translate(-4px,2px) rotate(-1deg)}20%{transform:translate(3px,-3px) rotate(1deg)}30%{transform:translate(-2px,4px) rotate(-2deg)}40%{transform:translate(4px,-1px) rotate(2deg)}50%{transform:translate(-3px,3px) rotate(-1deg)}60%{transform:translate(2px,-4px) rotate(1deg)}70%{transform:translate(-4px,1px) rotate(-2deg)}80%{transform:translate(3px,2px) rotate(2deg)}90%{transform:translate(-1px,-3px) rotate(-1deg)}}.ntd-anim-signature{animation:ntd-signature-enter .65s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-signature circle,.ntd-anim-signature ellipse,.ntd-anim-signature line,.ntd-anim-signature path,.ntd-anim-signature polygon,.ntd-anim-signature polyline,.ntd-anim-signature rect{stroke-dasharray:150;stroke-dashoffset:150;animation:ntd-signature-stroke 1.7s ease-out .05s forwards,ntd-signature-fill .55s ease-out 1.05s forwards;filter:drop-shadow(0 0 0 currentColor)}@keyframes ntd-signature-enter{0%{opacity:.08;transform:scale(.05) rotate(-8deg)}60%{opacity:1;transform:scale(1.06) rotate(0deg)}to{opacity:1;transform:scale(1)}}@keyframes ntd-signature-stroke{0%{stroke-dashoffset:150;filter:drop-shadow(0 0 0 currentColor)}65%{stroke-dashoffset:0;filter:drop-shadow(0 0 6px currentColor)}to{stroke-dashoffset:0;filter:drop-shadow(0 0 2px currentColor)}}@keyframes ntd-signature-fill{0%{fill-opacity:.05}to{fill-opacity:1}}.ntd-anim-draw-sequence circle,.ntd-anim-draw-sequence ellipse,.ntd-anim-draw-sequence line,.ntd-anim-draw-sequence path,.ntd-anim-draw-sequence polygon,.ntd-anim-draw-sequence polyline,.ntd-anim-draw-sequence rect{stroke-dasharray:160;stroke-dashoffset:160;fill-opacity:0;animation:ntd-draw-sequence 1.6s ease-out forwards}.ntd-anim-draw-sequence circle:first-child,.ntd-anim-draw-sequence ellipse:first-child,.ntd-anim-draw-sequence line:first-child,.ntd-anim-draw-sequence path:first-child,.ntd-anim-draw-sequence polygon:first-child,.ntd-anim-draw-sequence polyline:first-child,.ntd-anim-draw-sequence rect:first-child{animation-delay:0s}.ntd-anim-draw-sequence circle:nth-child(2),.ntd-anim-draw-sequence ellipse:nth-child(2),.ntd-anim-draw-sequence line:nth-child(2),.ntd-anim-draw-sequence path:nth-child(2),.ntd-anim-draw-sequence polygon:nth-child(2),.ntd-anim-draw-sequence polyline:nth-child(2),.ntd-anim-draw-sequence rect:nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence circle:nth-child(3),.ntd-anim-draw-sequence ellipse:nth-child(3),.ntd-anim-draw-sequence line:nth-child(3),.ntd-anim-draw-sequence path:nth-child(3),.ntd-anim-draw-sequence polygon:nth-child(3),.ntd-anim-draw-sequence polyline:nth-child(3),.ntd-anim-draw-sequence rect:nth-child(3){animation-delay:.4s}@keyframes ntd-draw-sequence{0%{stroke-dashoffset:160;fill-opacity:0}75%{stroke-dashoffset:0;fill-opacity:.15}to{stroke-dashoffset:0;fill-opacity:1}}.ntd-anim-stroke-order circle,.ntd-anim-stroke-order ellipse,.ntd-anim-stroke-order line,.ntd-anim-stroke-order path,.ntd-anim-stroke-order polygon,.ntd-anim-stroke-order polyline,.ntd-anim-stroke-order rect{stroke-dasharray:220;stroke-dashoffset:220;animation:ntd-stroke-order 2s linear forwards}@keyframes ntd-stroke-order{0%{stroke-dashoffset:220;opacity:.2}30%{opacity:1}to{stroke-dashoffset:0;opacity:1}}.ntd-anim-glow-trace circle,.ntd-anim-glow-trace ellipse,.ntd-anim-glow-trace line,.ntd-anim-glow-trace path,.ntd-anim-glow-trace polygon,.ntd-anim-glow-trace polyline,.ntd-anim-glow-trace rect{stroke-dasharray:180;animation:ntd-glow-trace 2.8s ease-in-out infinite}@keyframes ntd-glow-trace{0%{stroke-dashoffset:180;filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{stroke-dashoffset:0;filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);opacity:1}to{stroke-dashoffset:-180;filter:drop-shadow(0 0 2px currentColor);opacity:.5}}.ntd-anim-seal-stamp{animation:ntd-seal-stamp .75s cubic-bezier(.22,1,.36,1) forwards;transform-origin:center}@keyframes ntd-seal-stamp{0%{filter:blur(2px);opacity:0;transform:translateY(-14px) scale(1.25) rotate(-4deg)}45%{filter:blur(0);opacity:1;transform:translateY(2px) scale(.94) rotate(0deg)}70%{transform:translateY(-1px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-draw circle,.ntd-anim-draw ellipse,.ntd-anim-draw line,.ntd-anim-draw path,.ntd-anim-draw polygon,.ntd-anim-draw polyline,.ntd-anim-draw rect{stroke-dasharray:120;stroke-dashoffset:120;fill-opacity:0;animation:ntd-draw-stroke 1.2s ease-out forwards,ntd-draw-fill .4s ease-out .8s forwards}@keyframes ntd-draw-stroke{0%{stroke-dashoffset:120}to{stroke-dashoffset:0}}@keyframes ntd-draw-fill{0%{fill-opacity:0}to{fill-opacity:1}}.ntd-anim-draw-from-dot{animation:ntd-draw-dot-enter .45s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-draw-from-dot circle,.ntd-anim-draw-from-dot ellipse,.ntd-anim-draw-from-dot line,.ntd-anim-draw-from-dot path,.ntd-anim-draw-from-dot polygon,.ntd-anim-draw-from-dot polyline,.ntd-anim-draw-from-dot rect{stroke-dasharray:140;stroke-dashoffset:140;fill-opacity:0;animation:ntd-draw-dot-stroke 1.35s ease-out .15s forwards,ntd-draw-fill .45s ease-out .95s forwards}@keyframes ntd-draw-dot-enter{0%{opacity:.15;transform:scale(.08)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes ntd-draw-dot-stroke{0%{stroke-dashoffset:140}to{stroke-dashoffset:0}}.ntd-anim-draw-loop circle,.ntd-anim-draw-loop ellipse,.ntd-anim-draw-loop line,.ntd-anim-draw-loop path,.ntd-anim-draw-loop polygon,.ntd-anim-draw-loop polyline,.ntd-anim-draw-loop rect{stroke-dasharray:140;animation:ntd-draw-loop-stroke 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-stroke{0%{stroke-dashoffset:140;opacity:0}25%{stroke-dashoffset:0;opacity:1}60%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:-140;opacity:.2}}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-shape-pop .7s cubic-bezier(.34,1.56,.64,1) .35s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.5s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.65s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.8s}@keyframes ntd-draw-shape-pop{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.5)}60%{fill-opacity:.9;clip-path:circle(75% at 50% 50%);transform:scale(1.08)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-dot-shape-burst .65s cubic-bezier(.34,1.56,.64,1) .25s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.4s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.55s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.7s}@keyframes ntd-draw-dot-shape-burst{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.1)}50%{fill-opacity:.85;clip-path:circle(65% at 50% 50%);transform:scale(1.14)}75%{clip-path:circle(88% at 50% 50%);transform:scale(.97)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-seq-shape-wipe .6s cubic-bezier(.22,1,.36,1) forwards;clip-path:inset(100% 0 0 0);transform-box:fill-box;transform-origin:center bottom}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):first-child{animation-delay:0s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.4s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.6s}@keyframes ntd-draw-seq-shape-wipe{0%{fill-opacity:0;clip-path:inset(100% 0 0 0);transform:scaleY(.6)}70%{fill-opacity:.9;clip-path:inset(5% 0 0 0);transform:scaleY(1.04)}to{fill-opacity:1;clip-path:inset(0 0 0 0);transform:scaleY(1)}}.ntd-anim-draw-loop :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-draw-loop-shape-pulse 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-shape-pulse{0%{clip-path:circle(0 at 50% 50%);opacity:0}25%{clip-path:circle(100% at 50% 50%);opacity:1}60%{clip-path:circle(100% at 50% 50%);opacity:1}to{clip-path:circle(0 at 50% 50%);opacity:.2}}.ntd-anim-signature :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-signature-shape-stamp .8s cubic-bezier(.22,1,.36,1) .5s forwards;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform-box:fill-box;transform-origin:center}@keyframes ntd-signature-shape-stamp{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform:scale(.35) rotate(-6deg)}55%{fill-opacity:.85;clip-path:circle(70% at 50% 50%);filter:drop-shadow(0 0 8px currentColor);transform:scale(1.08) rotate(0deg)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 2px currentColor);transform:scale(1)}}.ntd-anim-stroke-order :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-stroke-order-shape-wipe 1.2s ease-out .3s forwards;clip-path:inset(0 100% 0 0)}@keyframes ntd-stroke-order-shape-wipe{0%{fill-opacity:0;clip-path:inset(0 100% 0 0)}40%{fill-opacity:.7}to{fill-opacity:1;clip-path:inset(0 0 0 0)}}.ntd-anim-glow-trace :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-glow-trace-shape 2.8s ease-in-out infinite}@keyframes ntd-glow-trace-shape{0%{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 16px currentColor);opacity:1}to{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 2px currentColor);opacity:.4}}.ntd-picker{--ntd-picker-border:var(--nice-border-color,#3a3a4a);--ntd-picker-radius:var(--nice-radius-lg,10px);--ntd-picker-bg:var(--nice-bg-elevated,#1e1e2a);--ntd-picker-text:var(--nice-text-primary,#f0f0f5);--ntd-picker-accent:var(--nice-color-primary,#6c5ce7);--ntd-picker-accent-hover:var(--nice-color-primary-hover,#5b4cdb);--ntd-picker-accent-alpha:var(--nice-primary-tint-20,rgba(108,92,231,.2));--ntd-picker-muted:var(--nice-text-muted,#606078);--ntd-picker-input-bg:var(--nice-bg-inset,#14141c);display:inline-block;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;position:relative}.ntd-picker-trigger{align-items:center;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;gap:8px;min-width:160px;padding:8px 14px;transition:border-color .2s,box-shadow .2s;user-select:none}.ntd-picker-trigger:hover{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-trigger:focus-visible{border-color:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 0 0 3px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));outline:none}.ntd-picker-trigger-icon{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));border-radius:6px;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.ntd-picker-trigger-label{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ntd-picker-trigger-chevron,.ntd-picker-trigger-placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-trigger-chevron{flex-shrink:0;transition:transform .2s}.ntd-picker.ntd-picker--open .ntd-picker-trigger-chevron{transform:rotate(180deg)}.ntd-picker-dropdown{animation:ntd-picker-appear .2s ease-out;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;left:0;max-height:460px;overflow:hidden;position:absolute;top:calc(100% + 6px);width:380px;z-index:1000}@keyframes ntd-picker-appear{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-picker-search{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);flex-shrink:0;padding:10px 12px;position:relative}.ntd-picker-search-icon{color:var(--ntd-picker-muted,#606078);left:22px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ntd-picker-search input{background:var(--ntd-picker-input-bg,#14141c);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);font-family:inherit;font-size:.82rem;outline:none;padding:8px 12px 8px 34px;transition:border-color .2s;width:100%}.ntd-picker-search input:focus{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-search input::placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-tabs{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;gap:2px;overflow-x:auto;padding:6px 10px;scrollbar-width:none}.ntd-picker-tabs::-webkit-scrollbar{display:none}.ntd-picker-tab{background:transparent;border:none;border-radius:6px;color:var(--ntd-picker-muted,#606078);cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;letter-spacing:.03em;padding:5px 10px;text-transform:uppercase;transition:all .15s;white-space:nowrap}.ntd-picker-tab:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));color:var(--ntd-picker-text,#f0f0f5)}.ntd-picker-tab.ntd-picker-tab--active{background:var(--ntd-picker-accent,#6c5ce7);color:#fff}.ntd-picker-grid-wrap{flex:1;overflow-y:auto;padding:8px;scrollbar-color:var(--ntd-picker-border,#3a3a4a) transparent;scrollbar-width:thin}.ntd-picker-grid-wrap::-webkit-scrollbar{width:5px}.ntd-picker-grid-wrap::-webkit-scrollbar-track{background:transparent}.ntd-picker-grid-wrap::-webkit-scrollbar-thumb{background:var(--ntd-picker-border,#3a3a4a);border-radius:3px}.ntd-picker-category-label{color:var(--ntd-picker-muted,#606078);font-size:.68rem;font-weight:600;letter-spacing:.05em;margin-top:4px;padding:6px 4px 4px;text-transform:uppercase}.ntd-picker-category-label:first-child{margin-top:0}.ntd-picker-grid{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.ntd-picker-cell{align-items:center;aspect-ratio:1;background:transparent;border:none;border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:flex;justify-content:center;position:relative;transition:all .15s;width:100%}.ntd-picker-cell:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));transform:scale(1.1)}.ntd-picker-cell.ntd-picker-cell--selected{background:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 2px 8px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));color:#fff}.ntd-picker-cell:focus-visible{outline:2px solid var(--ntd-picker-accent,#6c5ce7);outline-offset:1px}.ntd-picker-cell:after{background:var(--ntd-picker-text,#f0f0f5);border-radius:5px;bottom:calc(100% + 6px);color:var(--ntd-picker-bg,#1e1e2a);content:attr(data-name);font-size:.65rem;font-weight:500;left:50%;opacity:0;padding:3px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .15s;white-space:nowrap;z-index:10}.ntd-picker-cell:hover:after{opacity:1}.ntd-picker-cell.ntd-picker-cell--draggable{cursor:grab}.ntd-picker-cell.ntd-picker-cell--draggable:active{cursor:grabbing}.ntd-picker-cell.ntd-picker-cell--draggable:hover:before{border:2px dashed var(--ntd-picker-accent,#6c5ce7);border-radius:8px;content:"";inset:0;opacity:.5;pointer-events:none;position:absolute}.ntd-picker-empty{color:var(--ntd-picker-muted,#606078);font-size:.82rem;padding:32px 16px;text-align:center}.ntd-picker-empty-icon{font-size:2rem;margin-bottom:8px;opacity:.4}.ntd-picker-footer{align-items:center;border-top:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;justify-content:space-between;padding:8px 12px}.ntd-picker-count{font-size:.7rem}.ntd-picker-clear,.ntd-picker-count{color:var(--ntd-picker-muted,#606078)}.ntd-picker-clear{background:transparent;border:none;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.72rem;padding:4px 10px;transition:all .15s}.ntd-picker-clear:hover{background:rgba(255,80,80,.12);color:#ff5050}.ntd-picker-multi-badge{border-radius:10px;font-size:.7rem;font-weight:600;height:20px;min-width:20px;padding:0 6px}.ntd-picker-cell-check,.ntd-picker-multi-badge{align-items:center;background:var(--ntd-picker-accent,#6c5ce7);color:#fff;display:flex;justify-content:center}.ntd-picker-cell-check{border-radius:50%;height:16px;pointer-events:none;position:absolute;right:2px;top:2px;width:16px}.ntd-picker-cell.ntd-picker-cell--multi-select{position:relative}.ntd-picker-cell-fav{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--ntd-picker-muted,#606078);cursor:pointer;display:flex;height:16px;justify-content:center;left:2px;opacity:0;padding:0;position:absolute;top:2px;transition:all .15s;width:16px}.ntd-picker-cell-fav.ntd-picker-cell-fav--active,.ntd-picker-cell:hover .ntd-picker-cell-fav{opacity:1}.ntd-picker-cell-fav:hover{color:#feca57;transform:scale(1.2)}.ntd-picker-cell-fav.ntd-picker-cell-fav--active{color:#feca57}.ntd-picker-tab-special{align-items:center;display:inline-flex;gap:4px}.ntd-picker-tab-special svg{height:10px;width:10px}.ntd-picker-tab-count{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.2));border-radius:8px;display:inline-flex;font-size:.65rem;font-weight:600;height:16px;justify-content:center;margin-left:2px;min-width:16px;padding:0 4px}.ntd-picker-tab.ntd-picker-tab--active .ntd-picker-tab-count{background:hsla(0,0%,100%,.2)}.ntd-picker-done{background:var(--ntd-picker-accent,#6c5ce7);border:none;border-radius:5px;color:#fff;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;padding:4px 12px;transition:all .15s}.ntd-picker-done:hover{background:var(--ntd-picker-accent-hover,#5b4cdb);transform:translateY(-1px)}.ntd-picker.ntd-picker--disabled .ntd-picker-trigger{cursor:not-allowed;opacity:.5}.ntd-picker.ntd-picker--multi .ntd-picker-trigger{border-style:dashed}.nice-desktop-icon-exporter{color:var(--nice-text-primary,inherit);display:grid;font-size:var(--nice-font-size-sm,.8125rem);gap:var(--nice-space-4,16px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));min-width:0}.nice-desktop-icon-exporter :where(h3,h4){font-weight:var(--nice-font-weight-semibold,600);margin:0 0 var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(h3){font-size:var(--nice-font-size-md,.875rem)}.nice-desktop-icon-exporter :where(h4){color:var(--nice-text-secondary,#64748b);font-size:var(--nice-font-size-xs,.75rem)}.nice-desktop-icon-exporter :where(button){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);color:var(--nice-text-primary,inherit);cursor:pointer;font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-3,12px)}.nice-desktop-icon-exporter :where(button:hover:not(:disabled)){background:var(--nice-bg-secondary,#f8fafc)}.nice-desktop-icon-exporter :where(button:disabled){cursor:not-allowed;opacity:.5}.nice-desktop-icon-exporter :where(input[type=text]){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;color:var(--nice-text-primary,inherit);font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(input[type=range]){accent-color:var(--nice-color-primary,#3b82f6)}.nice-desktop-icon-exporter :where(button,input):focus-visible{box-shadow:var(--nice-focus-ring,0 0 0 2px var(--nice-color-primary,#3b82f6));outline:none}.nice-desktop-icon-exporter__config,.nice-desktop-icon-exporter__preview,.nice-desktop-icon-exporter__results{background:var(--nice-bg-elevated,var(--nice-bg-primary,#fff));border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-lg,8px);min-width:0;padding:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-grid{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-item{align-items:center;color:var(--nice-text-muted,#94a3b8);display:flex;flex-direction:column;font-size:var(--nice-font-size-xs,.75rem);font-variant-numeric:tabular-nums;gap:var(--nice-space-1,4px)}.nice-desktop-icon-exporter__preview-box{align-items:center;border-radius:var(--nice-radius-sm,4px);display:flex;justify-content:center}.nice-desktop-icon-exporter__config{display:flex;flex-direction:column;gap:var(--nice-space-2-5,10px)}.nice-desktop-icon-exporter__config>label{align-items:center;color:var(--nice-text-secondary,#64748b);display:flex;flex-wrap:wrap;font-weight:var(--nice-font-weight-medium,500);gap:var(--nice-space-2,8px)}.nice-desktop-icon-exporter__config>label>input[type=range],.nice-desktop-icon-exporter__config>label>input[type=text]{flex:1 1 140px;min-width:0}.nice-desktop-icon-exporter__platforms,.nice-desktop-icon-exporter__sizes{display:flex;flex-wrap:wrap;gap:var(--nice-space-1-5,6px) var(--nice-space-4,16px)}.nice-desktop-icon-exporter__sizes>h4{flex-basis:100%;margin:0}.nice-desktop-icon-exporter__platforms label,.nice-desktop-icon-exporter__sizes label{align-items:center;cursor:pointer;display:inline-flex;gap:var(--nice-space-1-5,6px)}.nice-desktop-icon-exporter__actions{display:flex;flex-wrap:wrap;gap:var(--nice-space-2,8px);grid-column:1/-1}.nice-desktop-icon-exporter__actions>button:first-child{background:var(--nice-color-primary,#3b82f6);border-color:var(--nice-color-primary,#3b82f6);color:var(--nice-text-on-primary,#fff);font-weight:var(--nice-font-weight-medium,500)}.nice-desktop-icon-exporter__results{grid-column:1/-1}.nice-desktop-icon-exporter__results-grid{display:grid;gap:var(--nice-space-2,8px);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.nice-desktop-icon-exporter__result-item{align-items:center;border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);display:flex;flex-direction:column;gap:var(--nice-space-1,4px);padding:var(--nice-space-2,8px);text-align:center}.nice-desktop-icon-exporter__result-item>img{max-height:64px;max-width:64px}.nice-desktop-icon-exporter__result-item>span{color:var(--nice-text-secondary,#64748b);font-family:var(--nice-font-mono,ui-monospace,monospace);font-size:var(--nice-font-size-xxs,.625rem);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
1
+ .nice-desktop-icon-exporter{color:var(--nice-text-primary,inherit);display:grid;font-size:var(--nice-font-size-sm,.8125rem);gap:var(--nice-space-4,16px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));min-width:0}.nice-desktop-icon-exporter :where(h3,h4){font-weight:var(--nice-font-weight-semibold,600);margin:0 0 var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(h3){font-size:var(--nice-font-size-md,.875rem)}.nice-desktop-icon-exporter :where(h4){color:var(--nice-text-secondary,#64748b);font-size:var(--nice-font-size-xs,.75rem)}.nice-desktop-icon-exporter :where(button){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);color:var(--nice-text-primary,inherit);cursor:pointer;font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-3,12px)}.nice-desktop-icon-exporter :where(button:hover:not(:disabled)){background:var(--nice-bg-secondary,#f8fafc)}.nice-desktop-icon-exporter :where(button:disabled){cursor:not-allowed;opacity:.5}.nice-desktop-icon-exporter :where(input[type=text]){background:var(--nice-bg-primary,#fff);border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);box-sizing:border-box;color:var(--nice-text-primary,inherit);font:inherit;padding:var(--nice-space-1-5,6px) var(--nice-space-2,8px)}.nice-desktop-icon-exporter :where(input[type=range]){accent-color:var(--nice-color-primary,#3b82f6)}.nice-desktop-icon-exporter :where(button,input):focus-visible{box-shadow:var(--nice-focus-ring,0 0 0 2px var(--nice-color-primary,#3b82f6));outline:none}.nice-desktop-icon-exporter__config,.nice-desktop-icon-exporter__preview,.nice-desktop-icon-exporter__results{background:var(--nice-bg-elevated,var(--nice-bg-primary,#fff));border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-lg,8px);min-width:0;padding:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-grid{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--nice-space-3,12px)}.nice-desktop-icon-exporter__preview-item{align-items:center;color:var(--nice-text-muted,#94a3b8);display:flex;flex-direction:column;font-size:var(--nice-font-size-xs,.75rem);font-variant-numeric:tabular-nums;gap:var(--nice-space-1,4px)}.nice-desktop-icon-exporter__preview-box{align-items:center;border-radius:var(--nice-radius-sm,4px);display:flex;justify-content:center}.nice-desktop-icon-exporter__config{display:flex;flex-direction:column;gap:var(--nice-space-2-5,10px)}.nice-desktop-icon-exporter__config>label{align-items:center;color:var(--nice-text-secondary,#64748b);display:flex;flex-wrap:wrap;font-weight:var(--nice-font-weight-medium,500);gap:var(--nice-space-2,8px)}.nice-desktop-icon-exporter__config>label>input[type=range],.nice-desktop-icon-exporter__config>label>input[type=text]{flex:1 1 140px;min-width:0}.nice-desktop-icon-exporter__platforms,.nice-desktop-icon-exporter__sizes{display:flex;flex-wrap:wrap;gap:var(--nice-space-1-5,6px) var(--nice-space-4,16px)}.nice-desktop-icon-exporter__sizes>h4{flex-basis:100%;margin:0}.nice-desktop-icon-exporter__platforms label,.nice-desktop-icon-exporter__sizes label{align-items:center;cursor:pointer;display:inline-flex;gap:var(--nice-space-1-5,6px)}.nice-desktop-icon-exporter__actions{display:flex;flex-wrap:wrap;gap:var(--nice-space-2,8px);grid-column:1/-1}.nice-desktop-icon-exporter__actions>button:first-child{background:var(--nice-color-primary,#3b82f6);border-color:var(--nice-color-primary,#3b82f6);color:var(--nice-text-on-primary,#fff);font-weight:var(--nice-font-weight-medium,500)}.nice-desktop-icon-exporter__results{grid-column:1/-1}.nice-desktop-icon-exporter__results-grid{display:grid;gap:var(--nice-space-2,8px);grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.nice-desktop-icon-exporter__result-item{align-items:center;border:1px solid var(--nice-border-color,#e2e8f0);border-radius:var(--nice-radius-md,6px);display:flex;flex-direction:column;gap:var(--nice-space-1,4px);padding:var(--nice-space-2,8px);text-align:center}.nice-desktop-icon-exporter__result-item>img{max-height:64px;max-width:64px}.nice-desktop-icon-exporter__result-item>span{color:var(--nice-text-secondary,#64748b);font-family:var(--nice-font-mono,ui-monospace,monospace);font-size:var(--nice-font-size-xxs,.625rem);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ntd-icon{display:inline-block;flex-shrink:0;transition:color .2s ease,transform .2s ease;vertical-align:-.125em}.ntd-anim-spin{animation:ntd-spin 1s linear infinite}.ntd-anim-spin-reverse{animation:ntd-spin 1s linear infinite reverse}@keyframes ntd-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ntd-anim-pulse{animation:ntd-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes ntd-pulse{0%,to{opacity:1}50%{opacity:.4}}.ntd-anim-bounce{animation:ntd-bounce 1s ease infinite}@keyframes ntd-bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(0)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(-25%)}}.ntd-anim-shake{animation:ntd-shake .6s ease-in-out infinite}@keyframes ntd-shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-2px)}20%,40%,60%,80%{transform:translateX(2px)}}.ntd-anim-float{animation:ntd-float 3s ease-in-out infinite}@keyframes ntd-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.ntd-anim-flip{animation:ntd-flip 1.2s ease-in-out infinite}@keyframes ntd-flip{0%{transform:perspective(400px) rotateY(0)}40%{transform:perspective(400px) rotateY(170deg)}50%{transform:perspective(400px) rotateY(190deg)}80%{transform:perspective(400px) rotateY(1turn)}to{transform:perspective(400px) rotateY(1turn)}}.ntd-anim-turn{animation:ntd-turn var(--ntd-anim-duration,4s) infinite}@keyframes ntd-turn{0%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotate(0deg)}12.5%,50%{animation-timing-function:cubic-bezier(.65,0,.35,1);transform:rotate(180deg)}62.5%,to{transform:rotate(0deg)}}.ntd-anim-turn .ntd-hourglass-sand{animation-duration:var(--ntd-anim-duration,4s);animation-iteration-count:infinite;animation-timing-function:linear;transform-box:view-box}.ntd-anim-turn .ntd-hourglass-sand--top-neck{animation-name:ntd-hourglass-top-neck;transform-origin:12px 11.4px}.ntd-anim-turn .ntd-hourglass-sand--top-base{animation-name:ntd-hourglass-top-base;transform-origin:12px 5.8px}.ntd-anim-turn .ntd-hourglass-sand--bottom-neck{animation-name:ntd-hourglass-bottom-neck;transform-origin:12px 12.6px}.ntd-anim-turn .ntd-hourglass-sand--bottom-base{animation-name:ntd-hourglass-bottom-base;transform-origin:12px 18.2px}.ntd-anim-turn .ntd-hourglass-sand--stream-up{animation-name:ntd-hourglass-stream-up}.ntd-anim-turn .ntd-hourglass-sand--stream-down{animation-name:ntd-hourglass-stream-down}@keyframes ntd-hourglass-top-base{0%,12.5%{transform:scaleY(0)}50%,62.5%{transform:scaleY(1)}62.6%,to{transform:scaleY(0)}}@keyframes ntd-hourglass-top-neck{0%,50%{transform:scale(0)}50.1%,62.5%{transform:scale(1)}to{transform:scale(0)}}@keyframes ntd-hourglass-bottom-neck{0%,12.5%{transform:scale(1)}50%,to{transform:scale(0)}}@keyframes ntd-hourglass-bottom-base{0%,62.5%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes ntd-hourglass-stream-up{0%,13%,49.5%,to{opacity:0}14%,48.5%{opacity:1}}@keyframes ntd-hourglass-stream-down{0%,63%,99.5%,to{opacity:0}64%,98.5%{opacity:1}}.ntd-anim-glow{animation:ntd-glow 2s ease-in-out infinite}@keyframes ntd-glow{0%,to{filter:drop-shadow(0 0 2px currentColor)}50%{filter:drop-shadow(0 0 12px currentColor) drop-shadow(0 0 20px currentColor)}}.ntd-anim-wiggle{animation:ntd-wiggle 1s ease-in-out infinite}@keyframes ntd-wiggle{0%,to{transform:rotate(0deg)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.ntd-anim-rubber{animation:ntd-rubber 1s ease-in-out infinite}@keyframes ntd-rubber{0%{transform:scale(1)}30%{transform:scaleX(1.25) scaleY(.75)}40%{transform:scaleX(.75) scaleY(1.25)}50%{transform:scaleX(1.15) scaleY(.85)}65%{transform:scaleX(.95) scaleY(1.05)}75%{transform:scaleX(1.05) scaleY(.95)}to{transform:scale(1)}}.ntd-anim-swing{animation:ntd-swing 1s ease-in-out infinite;transform-origin:top center}@keyframes ntd-swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.ntd-anim-tada{animation:ntd-tada 1.2s ease-in-out infinite}@keyframes ntd-tada{0%{transform:scale(1) rotate(0deg)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0deg)}}.ntd-anim-heartbeat{animation:ntd-heartbeat 1.2s ease-in-out infinite}@keyframes ntd-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.ntd-anim-fade-in{animation:ntd-fade-in .5s ease-out forwards}@keyframes ntd-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ntd-anim-slide-up{animation:ntd-slide-up .4s ease-out forwards}@keyframes ntd-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-jello{animation:ntd-jello 1s ease-in-out infinite}@keyframes ntd-jello{0%,to{transform:skewX(0deg) skewY(0deg)}11.1%{transform:skewX(-12.5deg) skewY(-12.5deg)}22.2%{transform:skewX(6.25deg) skewY(6.25deg)}33.3%{transform:skewX(-3.125deg) skewY(-3.125deg)}44.4%{transform:skewX(1.5625deg) skewY(1.5625deg)}55.5%{transform:skewX(-.78125deg) skewY(-.78125deg)}66.6%{transform:skewX(.390625deg) skewY(.390625deg)}77.7%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.ntd-anim-pop{animation:ntd-pop .6s ease-out infinite}@keyframes ntd-pop{0%{transform:scale(1)}15%{transform:scale(1.35)}30%{transform:scale(.9)}45%{transform:scale(1.1)}60%{transform:scale(.97)}75%{transform:scale(1.03)}to{transform:scale(1)}}.ntd-anim-squeeze{animation:ntd-squeeze 1.4s ease-in-out infinite}@keyframes ntd-squeeze{0%,to{transform:scaleX(1) scaleY(1)}25%{transform:scaleX(.7) scaleY(1.3)}50%{transform:scaleX(1) scaleY(1)}75%{transform:scaleX(1.3) scaleY(.7)}}.ntd-anim-drop{animation:ntd-drop .8s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-drop{0%{opacity:0;transform:translateY(-40px) scale(.8)}60%{opacity:1;transform:translateY(4px) scale(1.05)}75%{transform:translateY(-2px) scale(.98)}90%{transform:translateY(1px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-rise{animation:ntd-rise .7s cubic-bezier(.16,1,.3,1) forwards}@keyframes ntd-rise{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-slide-left{animation:ntd-slide-left .5s ease-out forwards}@keyframes ntd-slide-left{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-right{animation:ntd-slide-right .5s ease-out forwards}@keyframes ntd-slide-right{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.ntd-anim-slide-down{animation:ntd-slide-down .4s ease-out forwards}@keyframes ntd-slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ntd-anim-roll-in{animation:ntd-roll-in .8s ease-out forwards}@keyframes ntd-roll-in{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}to{opacity:1;transform:translateX(0) rotate(0deg)}}.ntd-anim-flash{animation:ntd-flash 1s ease-in-out infinite}@keyframes ntd-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.ntd-anim-vibrate{animation:ntd-vibrate .3s linear infinite}@keyframes ntd-vibrate{0%{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,-1px)}80%{transform:translate(1px,1px)}to{transform:translate(0)}}.ntd-anim-wobble{animation:ntd-wobble 1.2s ease-in-out infinite}@keyframes ntd-wobble{0%{transform:translateX(0) rotate(0deg)}15%{transform:translateX(-15%) rotate(-5deg)}30%{transform:translateX(10%) rotate(3deg)}45%{transform:translateX(-10%) rotate(-3deg)}60%{transform:translateX(5%) rotate(2deg)}75%{transform:translateX(-3%) rotate(-1deg)}to{transform:translateX(0) rotate(0deg)}}.ntd-anim-spiral{animation:ntd-spiral 2s linear infinite}@keyframes ntd-spiral{0%{transform:rotate(0deg) scale(.8)}25%{transform:rotate(90deg) scale(1.1)}50%{transform:rotate(180deg) scale(.8)}75%{transform:rotate(270deg) scale(1.1)}to{transform:rotate(1turn) scale(.8)}}.ntd-anim-ping{animation:ntd-ping 1.5s ease-out infinite}@keyframes ntd-ping{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(1.6)}71%{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}.ntd-anim-flicker{animation:ntd-flicker 1.5s steps(1) infinite}@keyframes ntd-flicker{0%{opacity:1}4%{opacity:.3}8%{opacity:1}12%{opacity:.6}16%{opacity:1}20%{opacity:.2}22%{opacity:1}50%{opacity:1}52%{opacity:.4}54%{opacity:1}80%{opacity:1}82%{opacity:.3}85%{opacity:1}90%{opacity:.5}92%{opacity:1}}.ntd-anim-tilt{animation:ntd-tilt 2s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-tilt{0%,to{transform:rotate(0deg)}25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}.ntd-anim-breathe{animation:ntd-breathe 4s ease-in-out infinite}@keyframes ntd-breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}.ntd-anim-drift{animation:ntd-drift 4s ease-in-out infinite}@keyframes ntd-drift{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(5px) rotate(1deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-5px) rotate(-1deg)}}.ntd-anim-orbit{animation:ntd-orbit 3s linear infinite}@keyframes ntd-orbit{0%{transform:translate(0)}25%{transform:translate(4px,-4px)}50%{transform:translateY(-6px)}75%{transform:translate(-4px,-4px)}to{transform:translate(0)}}.ntd-anim-crush{animation:ntd-crush .8s ease-in-out infinite}@keyframes ntd-crush{0%,to{transform:scaleY(1) scaleX(1)}40%{transform:scaleY(.3) scaleX(1.3)}60%{transform:scaleY(1.15) scaleX(.9)}80%{transform:scaleY(.95) scaleX(1.02)}}.ntd-anim-stretch{animation:ntd-stretch 1s ease-in-out infinite}@keyframes ntd-stretch{0%,to{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.4) scaleX(.8)}50%{transform:scaleY(.85) scaleX(1.1)}70%{transform:scaleY(1.1) scaleX(.95)}}.ntd-anim-dissolve{animation:ntd-dissolve 2s ease-in-out infinite}@keyframes ntd-dissolve{0%,to{filter:blur(0);opacity:1}50%{filter:blur(4px);opacity:.1}}.ntd-anim-materialize{animation:ntd-materialize .8s ease-out forwards}@keyframes ntd-materialize{0%{filter:blur(8px);opacity:0;transform:scale(.6)}60%{filter:blur(1px);opacity:.8;transform:scale(1.05)}to{filter:blur(0);opacity:1;transform:scale(1)}}.ntd-anim-sway{animation:ntd-sway 2.5s ease-in-out infinite;transform-origin:top center}@keyframes ntd-sway{0%,to{transform:rotate(0deg)}20%{transform:rotate(12deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}.ntd-anim-tremble{animation:ntd-tremble .15s linear infinite}@keyframes ntd-tremble{0%{transform:translate(0) rotate(0deg)}25%{transform:translate(-.5px,.5px) rotate(-.5deg)}50%{transform:translate(.5px,-.5px) rotate(.5deg)}75%{transform:translate(-.5px,-.5px) rotate(-.5deg)}to{transform:translate(0) rotate(0deg)}}.ntd-anim-rock{animation:ntd-rock 1.5s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-rock{0%,to{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}.ntd-anim-snap{animation:ntd-snap 1.5s ease-in-out infinite}@keyframes ntd-snap{0%,30%{transform:rotate(0deg)}50%{transform:rotate(190deg)}55%{transform:rotate(175deg)}60%{transform:rotate(182deg)}65%,to{transform:rotate(180deg)}}.ntd-anim-warp{animation:ntd-warp 2s ease-in-out infinite}@keyframes ntd-warp{0%,to{transform:perspective(300px) rotateX(0deg) rotateY(0deg)}25%{transform:perspective(300px) rotateX(10deg) rotateY(10deg)}50%{transform:perspective(300px) rotateX(-5deg) rotateY(-10deg)}75%{transform:perspective(300px) rotateX(8deg) rotateY(-5deg)}}.ntd-anim-glitch{animation:ntd-glitch .8s steps(1) infinite}@keyframes ntd-glitch{0%{transform:translate(0)}5%{transform:translate(-3px,2px) skewX(2deg)}10%{transform:translate(3px,-1px) skewX(-1deg)}15%{transform:translate(0)}40%{transform:translate(0)}42%{transform:translate(2px,1px) skewX(-3deg)}44%{transform:translate(-2px,-2px) skewX(1deg)}46%{transform:translate(0)}70%{transform:translate(0)}72%{transform:translate(-1px,3px) skewX(2deg)}74%{transform:translate(1px,-1px)}76%{transform:translate(0)}to{transform:translate(0)}}.ntd-anim-zoom-pulse{animation:ntd-zoom-pulse 1.5s ease-in-out infinite}@keyframes ntd-zoom-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.ntd-anim-ripple{animation:ntd-ripple 1.6s ease-out infinite}@keyframes ntd-ripple{0%{opacity:1;transform:scale(1)}30%{opacity:.8;transform:scale(1.15)}50%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.ntd-anim-implode{animation:ntd-implode 1.2s ease-in-out infinite}@keyframes ntd-implode{0%,to{opacity:1;transform:scale(1)}40%{opacity:.3;transform:scale(.2) rotate(20deg)}60%{opacity:.2;transform:scale(.15) rotate(25deg)}80%{opacity:1;transform:scale(1.1) rotate(0deg)}}.ntd-anim-explode{animation:ntd-explode 1.4s ease-in-out infinite}@keyframes ntd-explode{0%,to{opacity:1;transform:scale(1)}30%{opacity:.6;transform:scale(1.8)}50%{opacity:0;transform:scale(2)}51%{opacity:0;transform:scale(.5)}70%{opacity:.8;transform:scale(1.1)}85%{opacity:1;transform:scale(.95)}}.ntd-anim-rotate-x{animation:ntd-rotate-x 1.5s ease-in-out infinite}@keyframes ntd-rotate-x{0%{transform:perspective(400px) rotateX(0deg)}to{transform:perspective(400px) rotateX(1turn)}}.ntd-anim-morph{animation:ntd-morph 3s ease-in-out infinite}@keyframes ntd-morph{0%,to{border-radius:0;transform:scaleX(1) scaleY(1) rotate(0deg)}20%{transform:scaleX(1.1) scaleY(.9) rotate(2deg)}40%{transform:scaleX(.9) scaleY(1.1) rotate(-1deg)}60%{transform:scaleX(1.05) scaleY(.95) rotate(1deg)}80%{transform:scaleX(.95) scaleY(1.05) rotate(-2deg)}}.ntd-anim-levitate{animation:ntd-levitate 3s ease-in-out infinite}@keyframes ntd-levitate{0%,to{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));transform:translateY(0)}50%{filter:drop-shadow(0 12px 8px rgba(0,0,0,.1));transform:translateY(-10px)}}.ntd-anim-dash{animation:ntd-dash .8s ease-in-out infinite}@keyframes ntd-dash{0%,to{opacity:1;transform:translateX(0) scaleX(1)}30%{opacity:.8;transform:translateX(-3px) scaleX(.9)}60%{opacity:.6;transform:translateX(15px) scaleX(1.15)}80%{opacity:.9;transform:translateX(2px) scaleX(1)}}.ntd-anim-twist{animation:ntd-twist 1.5s ease-in-out infinite}@keyframes ntd-twist{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(30deg) scale(.9)}50%{transform:rotate(0deg) scale(1.05)}75%{transform:rotate(-30deg) scale(.9)}}.ntd-anim-stomp{animation:ntd-stomp 1s ease-in-out infinite;transform-origin:bottom center}@keyframes ntd-stomp{0%,to{transform:translateY(0) scaleY(1) scaleX(1)}20%{transform:translateY(-15px) scaleY(1.1) scaleX(.95)}50%{transform:translateY(0) scaleY(.7) scaleX(1.2)}65%{transform:translateY(-3px) scaleY(1.05) scaleX(.98)}80%{transform:translateY(0) scaleY(.95) scaleX(1.03)}}.ntd-anim-flap{animation:ntd-flap .6s ease-in-out infinite}@keyframes ntd-flap{0%,to{transform:perspective(400px) rotateX(0deg) translateY(0)}50%{transform:perspective(400px) rotateX(25deg) translateY(-5px)}}.ntd-anim-skate{animation:ntd-skate 2s ease-in-out infinite}@keyframes ntd-skate{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(8px) rotate(2deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-8px) rotate(-2deg)}}.ntd-anim-blink{animation:ntd-blink 1.4s steps(1) infinite}@keyframes ntd-blink{0%,49%{opacity:1}50%,99%{opacity:0}}.ntd-anim-reveal{animation:ntd-reveal 1s ease-out forwards}@keyframes ntd-reveal{0%{clip-path:circle(0 at 50% 50%);opacity:.5}to{clip-path:circle(75% at 50% 50%);opacity:1}}.ntd-anim-vortex{animation:ntd-vortex .8s ease-out forwards}@keyframes ntd-vortex{0%{opacity:0;transform:rotate(-540deg) scale(0)}60%{opacity:1;transform:rotate(20deg) scale(1.1)}80%{transform:rotate(-10deg) scale(.95)}to{opacity:1;transform:rotate(0deg) scale(1)}}.ntd-anim-meteor{animation:ntd-meteor .7s ease-out forwards}@keyframes ntd-meteor{0%{opacity:0;transform:translate(30px,-30px) rotate(15deg) scale(.5)}70%{opacity:1;transform:translate(-2px,2px) rotate(-2deg) scale(1.05)}to{opacity:1;transform:translate(0) rotate(0deg) scale(1)}}.ntd-anim-scale-in{animation:ntd-scale-in .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes ntd-scale-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.ntd-anim-scale-out{animation:ntd-scale-out .4s ease-in forwards}@keyframes ntd-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.ntd-anim-pendulum{animation:ntd-pendulum 2s ease-in-out infinite;transform-origin:top center}@keyframes ntd-pendulum{0%{transform:rotate(0deg)}25%{transform:rotate(25deg)}50%{transform:rotate(0deg)}75%{transform:rotate(-25deg)}to{transform:rotate(0deg)}}.ntd-anim-surge{animation:ntd-surge 1.5s ease-in-out infinite}@keyframes ntd-surge{0%,to{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}15%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);transform:scale(1.2)}30%{filter:drop-shadow(0 0 2px currentColor);transform:scale(.95)}45%{filter:drop-shadow(0 0 6px currentColor);transform:scale(1.1)}60%{filter:drop-shadow(0 0 0 currentColor);transform:scale(1)}}.ntd-anim-radar{animation:ntd-radar 2s linear infinite}@keyframes ntd-radar{0%{opacity:1;transform:rotate(0deg)}50%{opacity:.4}to{opacity:1;transform:rotate(1turn)}}.ntd-anim-typewriter{animation:ntd-typewriter 1s steps(12) forwards}@keyframes ntd-typewriter{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.ntd-anim-unfold{animation:ntd-unfold .7s ease-out forwards}@keyframes ntd-unfold{0%{opacity:.3;transform:scaleY(.05) scaleX(1.3)}50%{opacity:.9;transform:scaleY(1.1) scaleX(.95)}70%{opacity:1;transform:scaleY(.95) scaleX(1.02)}to{opacity:1;transform:scaleY(1) scaleX(1)}}.ntd-anim-fold{animation:ntd-fold .6s ease-in forwards}@keyframes ntd-fold{0%{opacity:1;transform:scaleY(1) scaleX(1)}to{opacity:0;transform:scaleY(.05) scaleX(1.3)}}.ntd-anim-scatter{animation:ntd-scatter 1.5s ease-in-out infinite}@keyframes ntd-scatter{0%,to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}20%{filter:blur(2px);opacity:.6;transform:scale(1.3) rotate(5deg)}40%{filter:blur(4px);opacity:.2;transform:scale(1.5) rotate(-3deg)}50%{filter:blur(6px);opacity:0;transform:scale(.8) rotate(0deg)}65%{filter:blur(3px);opacity:.3;transform:scale(.6) rotate(-5deg)}80%{filter:blur(1px);opacity:.8;transform:scale(.95) rotate(2deg)}}.ntd-anim-assemble{animation:ntd-assemble 1s ease-out forwards}@keyframes ntd-assemble{0%{filter:blur(8px);opacity:0;transform:scale(2) rotate(15deg)}30%{filter:blur(3px);opacity:.5;transform:scale(.8) rotate(-5deg)}60%{filter:blur(1px);opacity:.9;transform:scale(1.1) rotate(2deg)}80%{filter:blur(0);opacity:1;transform:scale(.97) rotate(-1deg)}to{filter:blur(0);opacity:1;transform:scale(1) rotate(0deg)}}.ntd-anim-neon{animation:ntd-neon 2s ease-in-out infinite}@keyframes ntd-neon{0%,to{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}10%{filter:drop-shadow(0 0 0 currentColor);opacity:.4}11%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}15%{filter:drop-shadow(0 0 0 currentColor);opacity:.3}16%{filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);opacity:1}50%{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor) drop-shadow(0 0 24px currentColor);opacity:1}}.ntd-anim-earthquake{animation:ntd-earthquake .5s ease-in-out infinite}@keyframes ntd-earthquake{0%,to{transform:translate(0)}10%{transform:translate(-4px,2px) rotate(-1deg)}20%{transform:translate(3px,-3px) rotate(1deg)}30%{transform:translate(-2px,4px) rotate(-2deg)}40%{transform:translate(4px,-1px) rotate(2deg)}50%{transform:translate(-3px,3px) rotate(-1deg)}60%{transform:translate(2px,-4px) rotate(1deg)}70%{transform:translate(-4px,1px) rotate(-2deg)}80%{transform:translate(3px,2px) rotate(2deg)}90%{transform:translate(-1px,-3px) rotate(-1deg)}}.ntd-anim-signature{animation:ntd-signature-enter .65s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-signature circle,.ntd-anim-signature ellipse,.ntd-anim-signature line,.ntd-anim-signature path,.ntd-anim-signature polygon,.ntd-anim-signature polyline,.ntd-anim-signature rect{stroke-dasharray:150;stroke-dashoffset:150;animation:ntd-signature-stroke 1.7s ease-out .05s forwards,ntd-signature-fill .55s ease-out 1.05s forwards;filter:drop-shadow(0 0 0 currentColor)}@keyframes ntd-signature-enter{0%{opacity:.08;transform:scale(.05) rotate(-8deg)}60%{opacity:1;transform:scale(1.06) rotate(0deg)}to{opacity:1;transform:scale(1)}}@keyframes ntd-signature-stroke{0%{stroke-dashoffset:150;filter:drop-shadow(0 0 0 currentColor)}65%{stroke-dashoffset:0;filter:drop-shadow(0 0 6px currentColor)}to{stroke-dashoffset:0;filter:drop-shadow(0 0 2px currentColor)}}@keyframes ntd-signature-fill{0%{fill-opacity:.05}to{fill-opacity:1}}.ntd-anim-draw-sequence circle,.ntd-anim-draw-sequence ellipse,.ntd-anim-draw-sequence line,.ntd-anim-draw-sequence path,.ntd-anim-draw-sequence polygon,.ntd-anim-draw-sequence polyline,.ntd-anim-draw-sequence rect{stroke-dasharray:160;stroke-dashoffset:160;fill-opacity:0;animation:ntd-draw-sequence 1.6s ease-out forwards}.ntd-anim-draw-sequence circle:first-child,.ntd-anim-draw-sequence ellipse:first-child,.ntd-anim-draw-sequence line:first-child,.ntd-anim-draw-sequence path:first-child,.ntd-anim-draw-sequence polygon:first-child,.ntd-anim-draw-sequence polyline:first-child,.ntd-anim-draw-sequence rect:first-child{animation-delay:0s}.ntd-anim-draw-sequence circle:nth-child(2),.ntd-anim-draw-sequence ellipse:nth-child(2),.ntd-anim-draw-sequence line:nth-child(2),.ntd-anim-draw-sequence path:nth-child(2),.ntd-anim-draw-sequence polygon:nth-child(2),.ntd-anim-draw-sequence polyline:nth-child(2),.ntd-anim-draw-sequence rect:nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence circle:nth-child(3),.ntd-anim-draw-sequence ellipse:nth-child(3),.ntd-anim-draw-sequence line:nth-child(3),.ntd-anim-draw-sequence path:nth-child(3),.ntd-anim-draw-sequence polygon:nth-child(3),.ntd-anim-draw-sequence polyline:nth-child(3),.ntd-anim-draw-sequence rect:nth-child(3){animation-delay:.4s}@keyframes ntd-draw-sequence{0%{stroke-dashoffset:160;fill-opacity:0}75%{stroke-dashoffset:0;fill-opacity:.15}to{stroke-dashoffset:0;fill-opacity:1}}.ntd-anim-stroke-order circle,.ntd-anim-stroke-order ellipse,.ntd-anim-stroke-order line,.ntd-anim-stroke-order path,.ntd-anim-stroke-order polygon,.ntd-anim-stroke-order polyline,.ntd-anim-stroke-order rect{stroke-dasharray:220;stroke-dashoffset:220;animation:ntd-stroke-order 2s linear forwards}@keyframes ntd-stroke-order{0%{stroke-dashoffset:220;opacity:.2}30%{opacity:1}to{stroke-dashoffset:0;opacity:1}}.ntd-anim-glow-trace circle,.ntd-anim-glow-trace ellipse,.ntd-anim-glow-trace line,.ntd-anim-glow-trace path,.ntd-anim-glow-trace polygon,.ntd-anim-glow-trace polyline,.ntd-anim-glow-trace rect{stroke-dasharray:180;animation:ntd-glow-trace 2.8s ease-in-out infinite}@keyframes ntd-glow-trace{0%{stroke-dashoffset:180;filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{stroke-dashoffset:0;filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);opacity:1}to{stroke-dashoffset:-180;filter:drop-shadow(0 0 2px currentColor);opacity:.5}}.ntd-anim-seal-stamp{animation:ntd-seal-stamp .75s cubic-bezier(.22,1,.36,1) forwards;transform-origin:center}@keyframes ntd-seal-stamp{0%{filter:blur(2px);opacity:0;transform:translateY(-14px) scale(1.25) rotate(-4deg)}45%{filter:blur(0);opacity:1;transform:translateY(2px) scale(.94) rotate(0deg)}70%{transform:translateY(-1px) scale(1.03)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-anim-draw circle,.ntd-anim-draw ellipse,.ntd-anim-draw line,.ntd-anim-draw path,.ntd-anim-draw polygon,.ntd-anim-draw polyline,.ntd-anim-draw rect{stroke-dasharray:120;stroke-dashoffset:120;fill-opacity:0;animation:ntd-draw-stroke 1.2s ease-out forwards,ntd-draw-fill .4s ease-out .8s forwards}@keyframes ntd-draw-stroke{0%{stroke-dashoffset:120}to{stroke-dashoffset:0}}@keyframes ntd-draw-fill{0%{fill-opacity:0}to{fill-opacity:1}}.ntd-anim-draw-from-dot{animation:ntd-draw-dot-enter .45s cubic-bezier(.34,1.56,.64,1) forwards;transform-origin:center}.ntd-anim-draw-from-dot circle,.ntd-anim-draw-from-dot ellipse,.ntd-anim-draw-from-dot line,.ntd-anim-draw-from-dot path,.ntd-anim-draw-from-dot polygon,.ntd-anim-draw-from-dot polyline,.ntd-anim-draw-from-dot rect{stroke-dasharray:140;stroke-dashoffset:140;fill-opacity:0;animation:ntd-draw-dot-stroke 1.35s ease-out .15s forwards,ntd-draw-fill .45s ease-out .95s forwards}@keyframes ntd-draw-dot-enter{0%{opacity:.15;transform:scale(.08)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes ntd-draw-dot-stroke{0%{stroke-dashoffset:140}to{stroke-dashoffset:0}}.ntd-anim-draw-loop circle,.ntd-anim-draw-loop ellipse,.ntd-anim-draw-loop line,.ntd-anim-draw-loop path,.ntd-anim-draw-loop polygon,.ntd-anim-draw-loop polyline,.ntd-anim-draw-loop rect{stroke-dasharray:140;animation:ntd-draw-loop-stroke 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-stroke{0%{stroke-dashoffset:140;opacity:0}25%{stroke-dashoffset:0;opacity:1}60%{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:-140;opacity:.2}}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-shape-pop .7s cubic-bezier(.34,1.56,.64,1) .35s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.5s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.65s}.ntd-anim-draw :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.8s}@keyframes ntd-draw-shape-pop{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.5)}60%{fill-opacity:.9;clip-path:circle(75% at 50% 50%);transform:scale(1.08)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-dot-shape-burst .65s cubic-bezier(.34,1.56,.64,1) .25s forwards;clip-path:circle(0 at 50% 50%);transform-box:fill-box;transform-origin:center}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.4s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.55s}.ntd-anim-draw-from-dot :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.7s}@keyframes ntd-draw-dot-shape-burst{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.1)}50%{fill-opacity:.85;clip-path:circle(65% at 50% 50%);transform:scale(1.14)}75%{clip-path:circle(88% at 50% 50%);transform:scale(.97)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);transform:scale(1)}}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-draw-seq-shape-wipe .6s cubic-bezier(.22,1,.36,1) forwards;clip-path:inset(100% 0 0 0);transform-box:fill-box;transform-origin:center bottom}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):first-child{animation-delay:0s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(2){animation-delay:.2s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(3){animation-delay:.4s}.ntd-anim-draw-sequence :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]):nth-child(n+4){animation-delay:.6s}@keyframes ntd-draw-seq-shape-wipe{0%{fill-opacity:0;clip-path:inset(100% 0 0 0);transform:scaleY(.6)}70%{fill-opacity:.9;clip-path:inset(5% 0 0 0);transform:scaleY(1.04)}to{fill-opacity:1;clip-path:inset(0 0 0 0);transform:scaleY(1)}}.ntd-anim-draw-loop :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-draw-loop-shape-pulse 2.4s ease-in-out infinite}@keyframes ntd-draw-loop-shape-pulse{0%{clip-path:circle(0 at 50% 50%);opacity:0}25%{clip-path:circle(100% at 50% 50%);opacity:1}60%{clip-path:circle(100% at 50% 50%);opacity:1}to{clip-path:circle(0 at 50% 50%);opacity:.2}}.ntd-anim-signature :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-signature-shape-stamp .8s cubic-bezier(.22,1,.36,1) .5s forwards;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform-box:fill-box;transform-origin:center}@keyframes ntd-signature-shape-stamp{0%{fill-opacity:0;clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);transform:scale(.35) rotate(-6deg)}55%{fill-opacity:.85;clip-path:circle(70% at 50% 50%);filter:drop-shadow(0 0 8px currentColor);transform:scale(1.08) rotate(0deg)}to{fill-opacity:1;clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 2px currentColor);transform:scale(1)}}.ntd-anim-stroke-order :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;fill-opacity:0;animation:ntd-stroke-order-shape-wipe 1.2s ease-out .3s forwards;clip-path:inset(0 100% 0 0)}@keyframes ntd-stroke-order-shape-wipe{0%{fill-opacity:0;clip-path:inset(0 100% 0 0)}40%{fill-opacity:.7}to{fill-opacity:1;clip-path:inset(0 0 0 0)}}.ntd-anim-glow-trace :is(path,rect,circle,ellipse,polygon)[fill]:not([fill=none]){stroke-dasharray:0;animation:ntd-glow-trace-shape 2.8s ease-in-out infinite}@keyframes ntd-glow-trace-shape{0%{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 0 currentColor);opacity:.3}45%{clip-path:circle(100% at 50% 50%);filter:drop-shadow(0 0 10px currentColor) drop-shadow(0 0 16px currentColor);opacity:1}to{clip-path:circle(0 at 50% 50%);filter:drop-shadow(0 0 2px currentColor);opacity:.4}}.ntd-picker{--ntd-picker-border:var(--nice-border-color,#3a3a4a);--ntd-picker-radius:var(--nice-radius-lg,10px);--ntd-picker-bg:var(--nice-bg-elevated,#1e1e2a);--ntd-picker-text:var(--nice-text-primary,#f0f0f5);--ntd-picker-accent:var(--nice-color-primary,#6c5ce7);--ntd-picker-accent-hover:var(--nice-color-primary-hover,#5b4cdb);--ntd-picker-accent-alpha:var(--nice-primary-tint-20,rgba(108,92,231,.2));--ntd-picker-muted:var(--nice-text-muted,#606078);--ntd-picker-input-bg:var(--nice-bg-inset,#14141c);display:inline-block;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;position:relative}.ntd-picker-trigger{align-items:center;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;gap:8px;min-width:160px;padding:8px 14px;transition:border-color .2s,box-shadow .2s;user-select:none}.ntd-picker-trigger:hover{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-trigger:focus-visible{border-color:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 0 0 3px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));outline:none}.ntd-picker-trigger-icon{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));border-radius:6px;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.ntd-picker-trigger-label{flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ntd-picker-trigger-chevron,.ntd-picker-trigger-placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-trigger-chevron{flex-shrink:0;transition:transform .2s}.ntd-picker.ntd-picker--open .ntd-picker-trigger-chevron{transform:rotate(180deg)}.ntd-picker-dropdown{animation:ntd-picker-appear .2s ease-out;background:var(--ntd-picker-bg,#1e1e2a);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:var(--ntd-picker-radius,10px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;left:0;max-height:460px;overflow:hidden;position:absolute;top:calc(100% + 6px);width:380px;z-index:1000}@keyframes ntd-picker-appear{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.ntd-picker-search{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);flex-shrink:0;padding:10px 12px;position:relative}.ntd-picker-search-icon{color:var(--ntd-picker-muted,#606078);left:22px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ntd-picker-search input{background:var(--ntd-picker-input-bg,#14141c);border:1px solid var(--ntd-picker-border,#3a3a4a);border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);font-family:inherit;font-size:.82rem;outline:none;padding:8px 12px 8px 34px;transition:border-color .2s;width:100%}.ntd-picker-search input:focus{border-color:var(--ntd-picker-accent,#6c5ce7)}.ntd-picker-search input::placeholder{color:var(--ntd-picker-muted,#606078)}.ntd-picker-tabs{border-bottom:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;gap:2px;overflow-x:auto;padding:6px 10px;scrollbar-width:none}.ntd-picker-tabs::-webkit-scrollbar{display:none}.ntd-picker-tab{background:transparent;border:none;border-radius:6px;color:var(--ntd-picker-muted,#606078);cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;letter-spacing:.03em;padding:5px 10px;text-transform:uppercase;transition:all .15s;white-space:nowrap}.ntd-picker-tab:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));color:var(--ntd-picker-text,#f0f0f5)}.ntd-picker-tab.ntd-picker-tab--active{background:var(--ntd-picker-accent,#6c5ce7);color:#fff}.ntd-picker-grid-wrap{flex:1;overflow-y:auto;padding:8px;scrollbar-color:var(--ntd-picker-border,#3a3a4a) transparent;scrollbar-width:thin}.ntd-picker-grid-wrap::-webkit-scrollbar{width:5px}.ntd-picker-grid-wrap::-webkit-scrollbar-track{background:transparent}.ntd-picker-grid-wrap::-webkit-scrollbar-thumb{background:var(--ntd-picker-border,#3a3a4a);border-radius:3px}.ntd-picker-category-label{color:var(--ntd-picker-muted,#606078);font-size:.68rem;font-weight:600;letter-spacing:.05em;margin-top:4px;padding:6px 4px 4px;text-transform:uppercase}.ntd-picker-category-label:first-child{margin-top:0}.ntd-picker-grid{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.ntd-picker-cell{align-items:center;aspect-ratio:1;background:transparent;border:none;border-radius:8px;color:var(--ntd-picker-text,#f0f0f5);cursor:pointer;display:flex;justify-content:center;position:relative;transition:all .15s;width:100%}.ntd-picker-cell:hover{background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.12));transform:scale(1.1)}.ntd-picker-cell.ntd-picker-cell--selected{background:var(--ntd-picker-accent,#6c5ce7);box-shadow:0 2px 8px var(--ntd-picker-accent-alpha,rgba(108,92,231,.25));color:#fff}.ntd-picker-cell:focus-visible{outline:2px solid var(--ntd-picker-accent,#6c5ce7);outline-offset:1px}.ntd-picker-cell:after{background:var(--ntd-picker-text,#f0f0f5);border-radius:5px;bottom:calc(100% + 6px);color:var(--ntd-picker-bg,#1e1e2a);content:attr(data-name);font-size:.65rem;font-weight:500;left:50%;opacity:0;padding:3px 8px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .15s;white-space:nowrap;z-index:10}.ntd-picker-cell:hover:after{opacity:1}.ntd-picker-cell.ntd-picker-cell--draggable{cursor:grab}.ntd-picker-cell.ntd-picker-cell--draggable:active{cursor:grabbing}.ntd-picker-cell.ntd-picker-cell--draggable:hover:before{border:2px dashed var(--ntd-picker-accent,#6c5ce7);border-radius:8px;content:"";inset:0;opacity:.5;pointer-events:none;position:absolute}.ntd-picker-empty{color:var(--ntd-picker-muted,#606078);font-size:.82rem;padding:32px 16px;text-align:center}.ntd-picker-empty-icon{font-size:2rem;margin-bottom:8px;opacity:.4}.ntd-picker-footer{align-items:center;border-top:1px solid var(--ntd-picker-border,#3a3a4a);display:flex;flex-shrink:0;justify-content:space-between;padding:8px 12px}.ntd-picker-count{font-size:.7rem}.ntd-picker-clear,.ntd-picker-count{color:var(--ntd-picker-muted,#606078)}.ntd-picker-clear{background:transparent;border:none;border-radius:5px;cursor:pointer;font-family:inherit;font-size:.72rem;padding:4px 10px;transition:all .15s}.ntd-picker-clear:hover{background:rgba(255,80,80,.12);color:#ff5050}.ntd-picker-multi-badge{border-radius:10px;font-size:.7rem;font-weight:600;height:20px;min-width:20px;padding:0 6px}.ntd-picker-cell-check,.ntd-picker-multi-badge{align-items:center;background:var(--ntd-picker-accent,#6c5ce7);color:#fff;display:flex;justify-content:center}.ntd-picker-cell-check{border-radius:50%;height:16px;pointer-events:none;position:absolute;right:2px;top:2px;width:16px}.ntd-picker-cell.ntd-picker-cell--multi-select{position:relative}.ntd-picker-cell-fav{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--ntd-picker-muted,#606078);cursor:pointer;display:flex;height:16px;justify-content:center;left:2px;opacity:0;padding:0;position:absolute;top:2px;transition:all .15s;width:16px}.ntd-picker-cell-fav.ntd-picker-cell-fav--active,.ntd-picker-cell:hover .ntd-picker-cell-fav{opacity:1}.ntd-picker-cell-fav:hover{color:#feca57;transform:scale(1.2)}.ntd-picker-cell-fav.ntd-picker-cell-fav--active{color:#feca57}.ntd-picker-tab-special{align-items:center;display:inline-flex;gap:4px}.ntd-picker-tab-special svg{height:10px;width:10px}.ntd-picker-tab-count{align-items:center;background:var(--ntd-picker-accent-alpha,rgba(108,92,231,.2));border-radius:8px;display:inline-flex;font-size:.65rem;font-weight:600;height:16px;justify-content:center;margin-left:2px;min-width:16px;padding:0 4px}.ntd-picker-tab.ntd-picker-tab--active .ntd-picker-tab-count{background:hsla(0,0%,100%,.2)}.ntd-picker-done{background:var(--ntd-picker-accent,#6c5ce7);border:none;border-radius:5px;color:#fff;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;padding:4px 12px;transition:all .15s}.ntd-picker-done:hover{background:var(--ntd-picker-accent-hover,#5b4cdb);transform:translateY(-1px)}.ntd-picker.ntd-picker--disabled .ntd-picker-trigger{cursor:not-allowed;opacity:.5}.ntd-picker.ntd-picker--multi .ntd-picker-trigger{border-style:dashed}
@@ -1,5 +1,12 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import { createIcon } from './createIcon';
3
+ import type { IconRenderProps } from './types';
4
+ /**
5
+ * The colour of a detail drawn in secondary on a filled shape (a floppy's label, a ribbon): the
6
+ * secondary colour, but the accent colour in the cutout's mask — there secondary is cut out with
7
+ * the shape and the detail would vanish, while the accent draws in the cut.
8
+ */
9
+ export declare function detailColor({ variant, secondaryColor, accentColor }: IconRenderProps): string;
3
10
  /**
4
11
  * `content` drawn only inside `shape` — for accent lines that read as a cut through a shape (a
5
12
  * pencil's band, a calendar's header line, an envelope's flap): clipped, they meet the shape's
@@ -10,10 +17,16 @@ import { createIcon } from './createIcon';
10
17
  * `uid` — a renderer called outside createIcon — the content is drawn as it is.
11
18
  */
12
19
  export declare function within(uid: string | undefined, name: string, shape: ReactNode, content: ReactNode): ReactNode;
20
+ /**
21
+ * NtdBell and NtdBellRing, so the two share one bell; `ringing` adds the ring marks. Duotone and
22
+ * vivid are fills only: the bell primary, the clapper secondary. The marks are primary on the solid
23
+ * bell, secondary in duotone and in the accent colour in vivid.
24
+ */
25
+ export declare function bellIcon(displayName: string, ringing: boolean): ReturnType<typeof createIcon>;
13
26
  /**
14
27
  * A paper icon — NtdFile, and every document drawn on the same page (NtdFileText, NtdInvoice,
15
28
  * NtdContract, …), so their pages and folds match. The fold is secondary when the page is filled;
16
- * `text` is the document's writing, a path of strokes kept below the fold (y ≥ 11, x 7.5–16.5),
29
+ * `text` is the document's writing, a path of strokes kept below the fold (y ≥ 11, x 7–17),
17
30
  * drawn in the accent colour on a filled page and in primary on a stroked one.
18
31
  */
19
32
  export declare function paperIcon(displayName: string, text?: string): ReturnType<typeof createIcon>;
@@ -1,6 +1,6 @@
1
1
  export { NtdArrowUp, NtdArrowDown, NtdArrowLeft, NtdArrowRight, NtdChevronUp, NtdChevronDown, NtdChevronLeft, NtdChevronRight, NtdMenu, NtdClose, NtdMoreHorizontal, NtdMoreVertical, NtdExternalLink, NtdRefresh, } from './navigation';
2
2
  export { NtdSearch, NtdEdit, NtdEditDetail, NtdTrash, NtdSave, NtdDownload, NtdUpload, NtdShare, NtdCopy, NtdClipboard, NtdPlus, NtdMinus, NtdCheck, NtdFilter, NtdSort, NtdPrint, NtdZoomIn, NtdZoomOut, NtdUndo, NtdRedo, NtdReply, NtdLink, NtdSettings, NtdLogIn, NtdLogOut, NtdLock, NtdUnlock, NtdGroup, NtdUngroup, } from './actions';
3
- export { NtdHome, NtdUser, NtdAdmin, NtdUsers, NtdHeart, NtdStar, NtdBell, NtdEye, NtdEyeOff, NtdInfo, NtdWarning, NtdError, NtdSuccess, NtdHelp, NtdClock, NtdCalendar, NtdTag, NtdBackspace, NtdBookmark, NtdFlag, NtdThumbUp, NtdThumbDown, NtdShield, NtdGlobe, NtdMap, NtdPin, NtdSun, NtdMoon, NtdCursor, NtdWireframe, } from './ui';
3
+ export { NtdHome, NtdUser, NtdAdmin, NtdUsers, NtdHeart, NtdStar, NtdBell, NtdEye, NtdEyeOff, NtdInfo, NtdWarning, NtdError, NtdSuccess, NtdHelp, NtdClock, NtdHourglass, NtdCalendar, NtdTag, NtdBackspace, NtdBookmark, NtdFlag, NtdThumbUp, NtdThumbDown, NtdShield, NtdGlobe, NtdMap, NtdPin, NtdSun, NtdMoon, NtdCursor, NtdWireframe, } from './ui';
4
4
  export { NtdRecycle, NtdCompost, NtdTrashSort, NtdSolarPanel, NtdWindTurbine, NtdEvCharger, NtdHydropower, NtdCarbonFootprint, NtdCo2, NtdNetZero, NtdEcoFriendly, NtdOrganic, NtdBiodegradable, NtdPlantTree, NtdWildlife, sustainabilityIcons, } from './sustainability';
5
5
  export { NtdAccessibility, NtdWheelchair, NtdBlind, NtdDeaf, NtdSignLanguage, NtdBraille, NtdAudioDescription, NtdClosedCaptions, NtdDyslexia, NtdEasyRead, NtdScreenReader, NtdHearingAid, NtdAssistiveTech, accessibilityIcons, } from './accessibility';
6
6
  export { NtdContract, NtdLegalDocument, NtdTermsOfService, NtdPrivacyPolicy, NtdGdpr, NtdCcpa, NtdCookieConsent, NtdCopyright, NtdTrademark, NtdPatent, NtdCompliance, NtdCertified, NtdAudit, legalIcons, } from './legal';
@@ -13,6 +13,7 @@ export declare const NtdError: import("react").ForwardRefExoticComponent<import(
13
13
  export declare const NtdSuccess: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
14
14
  export declare const NtdHelp: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
15
15
  export declare const NtdClock: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
16
+ export declare const NtdHourglass: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
16
17
  export declare const NtdCalendar: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
17
18
  export declare const NtdTag: import("react").ForwardRefExoticComponent<import("..").NtdIconProps & import("react").RefAttributes<SVGSVGElement>>;
18
19
  /** The backspace key: a key shape pointing left with a cross inside (delete the last character). */
@@ -71,7 +71,7 @@ export type CutoutShape = 'rounded-square' | 'circle' | 'square' | 'hexagon' | '
71
71
  * Each value maps to a `.ntd-anim-{name}` CSS class defined in `animations.css`.
72
72
  *
73
73
  * **Categories:**
74
- * - **Core transforms:** spin, pulse, bounce, shake, float, flip, glow, wiggle, etc.
74
+ * - **Core transforms:** spin, pulse, bounce, shake, float, flip, glow, wiggle, turn, etc.
75
75
  * - **Entrances (one-shot):** fade-in, slide-up, drop, rise, roll-in, vortex, meteor, etc.
76
76
  * - **Exits (one-shot):** scale-out, fold, dissolve.
77
77
  * - **Organic / natural:** breathe, drift, orbit, sway, tilt, pendulum, levitate, etc.
@@ -86,7 +86,9 @@ export type CutoutShape = 'rounded-square' | 'circle' | 'square' | 'hexagon' | '
86
86
  * <NtdBell animation="shake" animationDuration="0.5s" />
87
87
  * ```
88
88
  */
89
- export type IconAnimation = 'spin' | 'spin-reverse' | 'pulse' | 'bounce' | 'shake' | 'float' | 'flip' | 'glow' | 'wiggle' | 'rubber' | 'swing' | 'tada' | 'heartbeat' | 'fade-in' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'drop' | 'rise' | 'roll-in' | 'materialize' | 'vortex' | 'meteor' | 'scale-in' | 'signature' | 'draw-sequence' | 'stroke-order' | 'glow-trace' | 'seal-stamp' | 'reveal' | 'typewriter' | 'unfold' | 'assemble' | 'draw' | 'draw-from-dot' | 'scale-out' | 'fold' | 'dissolve' | 'breathe' | 'drift' | 'orbit' | 'sway' | 'tilt' | 'rock' | 'pendulum' | 'levitate' | 'flap' | 'skate' | 'jello' | 'pop' | 'squeeze' | 'crush' | 'stretch' | 'stomp' | 'snap' | 'twist' | 'dash' | 'surge' | 'flash' | 'blink' | 'flicker' | 'vibrate' | 'tremble' | 'glitch' | 'neon' | 'earthquake' | 'wobble' | 'spiral' | 'warp' | 'morph' | 'zoom-pulse' | 'ripple' | 'radar' | 'ping' | 'implode' | 'explode' | 'scatter' | 'rotate-x' | 'draw-loop';
89
+ export type IconAnimation = 'spin' | 'spin-reverse' | 'pulse' | 'bounce' | 'shake' | 'float' | 'flip' | 'glow' | 'wiggle' | 'rubber' | 'swing' | 'tada' | 'heartbeat'
90
+ /** Turns the icon upside down, holds, turns it back and holds; NtdHourglass pours its sand. */
91
+ | 'turn' | 'fade-in' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'drop' | 'rise' | 'roll-in' | 'materialize' | 'vortex' | 'meteor' | 'scale-in' | 'signature' | 'draw-sequence' | 'stroke-order' | 'glow-trace' | 'seal-stamp' | 'reveal' | 'typewriter' | 'unfold' | 'assemble' | 'draw' | 'draw-from-dot' | 'scale-out' | 'fold' | 'dissolve' | 'breathe' | 'drift' | 'orbit' | 'sway' | 'tilt' | 'rock' | 'pendulum' | 'levitate' | 'flap' | 'skate' | 'jello' | 'pop' | 'squeeze' | 'crush' | 'stretch' | 'stomp' | 'snap' | 'twist' | 'dash' | 'surge' | 'flash' | 'blink' | 'flicker' | 'vibrate' | 'tremble' | 'glitch' | 'neon' | 'earthquake' | 'wobble' | 'spiral' | 'warp' | 'morph' | 'zoom-pulse' | 'ripple' | 'radar' | 'ping' | 'implode' | 'explode' | 'scatter' | 'rotate-x' | 'draw-loop';
90
92
  /**
91
93
  * Named gradient presets.
92
94
  *
@@ -209,7 +211,10 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
209
211
  strokeLinejoin?: 'round' | 'miter' | 'bevel';
210
212
  /** CSS animation to apply */
211
213
  animation?: IconAnimation;
212
- /** Animation duration override (CSS value) */
214
+ /**
215
+ * Animation duration override (CSS value). Also set as `--ntd-anim-duration`, so the parts an
216
+ * icon animates inside itself (NtdHourglass's sand under `turn`) keep in step.
217
+ */
213
218
  animationDuration?: string;
214
219
  /** SMIL animation to apply (SVG-native, no CSS required) */
215
220
  smilAnimation?: SmilAnimationType;
@@ -274,6 +279,10 @@ export interface NtdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
274
279
  * so renderers can focus purely on SVG path construction.
275
280
  */
276
281
  export interface IconRenderProps {
282
+ /**
283
+ * The variant being drawn. `paths.solid` also draws the cutout's mask, and then gets `cutout`
284
+ * (see `detailColor`).
285
+ */
277
286
  variant: IconVariant;
278
287
  primaryColor: string;
279
288
  secondaryColor: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nice2dev/icons",
3
- "version": "1.3.2",
3
+ "version": "1.3.4",
4
4
  "description": "Beautiful, lightweight, multi-color SVG icon library for React with animations",
5
5
  "author": "NiceToDev <contact@nicetodev.com>",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -109,7 +109,7 @@
109
109
  },
110
110
  "devDependencies": {
111
111
  "@chromatic-com/storybook": "^5.3.1",
112
- "@nice2dev/ui-core": "^1.3.2",
112
+ "@nice2dev/ui-core": "^1.3.4",
113
113
  "@rollup/plugin-commonjs": "^29.0.3",
114
114
  "@rollup/plugin-node-resolve": "^16.0.3",
115
115
  "@rollup/plugin-typescript": "^12.3.0",