@ultraviolet/plus 0.13.1 → 0.14.1

package/dist/@ultraviolet/icons/dist/components/Icon/Icons.js

@@ -55,49 +55,50 @@ import { ReactComponent as Memo$R } from './assets/default/upload.svg.js';
 import { ReactComponent as Memo$S } from './assets/default/view.svg.js';
 import { ReactComponent as Memo$T } from './assets/default/west.svg.js';
 import { ReactComponent as Memo$U } from './assets/default/youtube.svg.js';
-import { ReactComponent as Memo$1A } from './assets/default-outline/address.svg.js';
-import { ReactComponent as Memo$1B } from './assets/default-outline/alert-circle.svg.js';
-import { ReactComponent as Memo$1C } from './assets/default-outline/auto-fix.svg.js';
-import { ReactComponent as Memo$1D } from './assets/default-outline/book-open-outline.svg.js';
-import { ReactComponent as Memo$1E } from './assets/default-outline/bullhorn.svg.js';
-import { ReactComponent as Memo$1F } from './assets/default-outline/calculator.svg.js';
-import { ReactComponent as Memo$1G } from './assets/default-outline/calendar-range.svg.js';
-import { ReactComponent as Memo$1H } from './assets/default-outline/chat.svg.js';
-import { ReactComponent as Memo$1I } from './assets/default-outline/check-circle.svg.js';
-import { ReactComponent as Memo$1J } from './assets/default-outline/clock-outline.svg.js';
-import { ReactComponent as Memo$1K } from './assets/default-outline/console.svg.js';
-import { ReactComponent as Memo$1L } from './assets/default-outline/credential.svg.js';
-import { ReactComponent as Memo$1M } from './assets/default-outline/credit-card.svg.js';
-import { ReactComponent as Memo$1N } from './assets/default-outline/database.svg.js';
-import { ReactComponent as Memo$1O } from './assets/default-outline/delete.svg.js';
-import { ReactComponent as Memo$1P } from './assets/default-outline/doc.svg.js';
-import { ReactComponent as Memo$1Q } from './assets/default-outline/earth.svg.js';
-import { ReactComponent as Memo$1R } from './assets/default-outline/email-remove.svg.js';
-import { ReactComponent as Memo$1S } from './assets/default-outline/email.svg.js';
-import { ReactComponent as Memo$1T } from './assets/default-outline/eye-off.svg.js';
-import { ReactComponent as Memo$1U } from './assets/default-outline/eye.svg.js';
-import { ReactComponent as Memo$1V } from './assets/default-outline/filter.svg.js';
-import { ReactComponent as Memo$1W } from './assets/default-outline/folder.svg.js';
-import { ReactComponent as Memo$1X } from './assets/default-outline/help-circle.svg.js';
-import { ReactComponent as Memo$1Y } from './assets/default-outline/id.svg.js';
-import { ReactComponent as Memo$1Z } from './assets/default-outline/information.svg.js';
-import { ReactComponent as Memo$1_ } from './assets/default-outline/lock.svg.js';
-import { ReactComponent as Memo$1$ } from './assets/default-outline/members.svg.js';
-import { ReactComponent as Memo$20 } from './assets/default-outline/moon.svg.js';
-import { ReactComponent as Memo$21 } from './assets/default-outline/mosaic.svg.js';
-import { ReactComponent as Memo$22 } from './assets/default-outline/pencil.svg.js';
-import { ReactComponent as Memo$23 } from './assets/default-outline/phone.svg.js';
-import { ReactComponent as Memo$2d } from './assets/default-outline/pin.svg.js';
-import { ReactComponent as Memo$24 } from './assets/default-outline/play.svg.js';
-import { ReactComponent as Memo$25 } from './assets/default-outline/privacy.svg.js';
-import { ReactComponent as Memo$26 } from './assets/default-outline/profile.svg.js';
-import { ReactComponent as Memo$27 } from './assets/default-outline/rocket.svg.js';
-import { ReactComponent as Memo$28 } from './assets/default-outline/settings.svg.js';
-import { ReactComponent as Memo$29 } from './assets/default-outline/sun.svg.js';
-import { ReactComponent as Memo$2a } from './assets/default-outline/support.svg.js';
-import { ReactComponent as Memo$2b } from './assets/default-outline/unlock.svg.js';
-import { ReactComponent as Memo$2e } from './assets/default-outline/unpin.svg.js';
-import { ReactComponent as Memo$2c } from './assets/default-outline/weather-night.svg.js';
+import { ReactComponent as Memo$1B } from './assets/default-outline/address.svg.js';
+import { ReactComponent as Memo$1C } from './assets/default-outline/alert-circle.svg.js';
+import { ReactComponent as Memo$1D } from './assets/default-outline/auto-fix.svg.js';
+import { ReactComponent as Memo$1E } from './assets/default-outline/book-open-outline.svg.js';
+import { ReactComponent as Memo$1F } from './assets/default-outline/bullhorn.svg.js';
+import { ReactComponent as Memo$1G } from './assets/default-outline/calculator.svg.js';
+import { ReactComponent as Memo$1H } from './assets/default-outline/calendar-range.svg.js';
+import { ReactComponent as Memo$1I } from './assets/default-outline/chat.svg.js';
+import { ReactComponent as Memo$1J } from './assets/default-outline/check-circle.svg.js';
+import { ReactComponent as Memo$1K } from './assets/default-outline/clock-outline.svg.js';
+import { ReactComponent as Memo$1L } from './assets/default-outline/console.svg.js';
+import { ReactComponent as Memo$1M } from './assets/default-outline/credential.svg.js';
+import { ReactComponent as Memo$1N } from './assets/default-outline/credit-card.svg.js';
+import { ReactComponent as Memo$1O } from './assets/default-outline/database.svg.js';
+import { ReactComponent as Memo$1P } from './assets/default-outline/delete.svg.js';
+import { ReactComponent as Memo$1Q } from './assets/default-outline/doc.svg.js';
+import { ReactComponent as Memo$1R } from './assets/default-outline/earth.svg.js';
+import { ReactComponent as Memo$1S } from './assets/default-outline/email-remove.svg.js';
+import { ReactComponent as Memo$1T } from './assets/default-outline/email.svg.js';
+import { ReactComponent as Memo$1U } from './assets/default-outline/eye-off.svg.js';
+import { ReactComponent as Memo$1V } from './assets/default-outline/eye.svg.js';
+import { ReactComponent as Memo$1W } from './assets/default-outline/filter.svg.js';
+import { ReactComponent as Memo$1X } from './assets/default-outline/folder.svg.js';
+import { ReactComponent as Memo$1Y } from './assets/default-outline/help-circle.svg.js';
+import { ReactComponent as Memo$1Z } from './assets/default-outline/id.svg.js';
+import { ReactComponent as Memo$1_ } from './assets/default-outline/information.svg.js';
+import { ReactComponent as Memo$1$ } from './assets/default-outline/lock.svg.js';
+import { ReactComponent as Memo$20 } from './assets/default-outline/members.svg.js';
+import { ReactComponent as Memo$21 } from './assets/default-outline/moon.svg.js';
+import { ReactComponent as Memo$22 } from './assets/default-outline/mosaic.svg.js';
+import { ReactComponent as Memo$23 } from './assets/default-outline/pen.svg.js';
+import { ReactComponent as Memo$24 } from './assets/default-outline/pencil.svg.js';
+import { ReactComponent as Memo$25 } from './assets/default-outline/phone.svg.js';
+import { ReactComponent as Memo$2f } from './assets/default-outline/pin.svg.js';
+import { ReactComponent as Memo$26 } from './assets/default-outline/play.svg.js';
+import { ReactComponent as Memo$27 } from './assets/default-outline/privacy.svg.js';
+import { ReactComponent as Memo$28 } from './assets/default-outline/profile.svg.js';
+import { ReactComponent as Memo$29 } from './assets/default-outline/rocket.svg.js';
+import { ReactComponent as Memo$2a } from './assets/default-outline/settings.svg.js';
+import { ReactComponent as Memo$2b } from './assets/default-outline/sun.svg.js';
+import { ReactComponent as Memo$2c } from './assets/default-outline/support.svg.js';
+import { ReactComponent as Memo$2d } from './assets/default-outline/unlock.svg.js';
+import { ReactComponent as Memo$2g } from './assets/default-outline/unpin.svg.js';
+import { ReactComponent as Memo$2e } from './assets/default-outline/weather-night.svg.js';
 import { ReactComponent as Memo$V } from './assets/default-solid/address.svg.js';
 import { ReactComponent as Memo$W } from './assets/default-solid/alert-circle.svg.js';
 import { ReactComponent as Memo$X } from './assets/default-solid/auto-fix.svg.js';
@@ -128,19 +129,20 @@ import { ReactComponent as Memo$1j } from './assets/default-solid/lock.svg.js';
 import { ReactComponent as Memo$1k } from './assets/default-solid/members.svg.js';
 import { ReactComponent as Memo$1l } from './assets/default-solid/moon.svg.js';
 import { ReactComponent as Memo$1m } from './assets/default-solid/mosaic.svg.js';
-import { ReactComponent as Memo$1n } from './assets/default-solid/pencil.svg.js';
-import { ReactComponent as Memo$1o } from './assets/default-solid/phone.svg.js';
-import { ReactComponent as Memo$1y } from './assets/default-solid/pin.svg.js';
-import { ReactComponent as Memo$1p } from './assets/default-solid/play.svg.js';
-import { ReactComponent as Memo$1q } from './assets/default-solid/privacy.svg.js';
-import { ReactComponent as Memo$1r } from './assets/default-solid/profile.svg.js';
-import { ReactComponent as Memo$1s } from './assets/default-solid/rocket.svg.js';
-import { ReactComponent as Memo$1t } from './assets/default-solid/settings.svg.js';
-import { ReactComponent as Memo$1u } from './assets/default-solid/sun.svg.js';
-import { ReactComponent as Memo$1v } from './assets/default-solid/support.svg.js';
-import { ReactComponent as Memo$1w } from './assets/default-solid/unlock.svg.js';
-import { ReactComponent as Memo$1z } from './assets/default-solid/unpin.svg.js';
-import { ReactComponent as Memo$1x } from './assets/default-solid/weather-night.svg.js';
+import { ReactComponent as Memo$1n } from './assets/default-solid/pen.svg.js';
+import { ReactComponent as Memo$1o } from './assets/default-solid/pencil.svg.js';
+import { ReactComponent as Memo$1p } from './assets/default-solid/phone.svg.js';
+import { ReactComponent as Memo$1z } from './assets/default-solid/pin.svg.js';
+import { ReactComponent as Memo$1q } from './assets/default-solid/play.svg.js';
+import { ReactComponent as Memo$1r } from './assets/default-solid/privacy.svg.js';
+import { ReactComponent as Memo$1s } from './assets/default-solid/profile.svg.js';
+import { ReactComponent as Memo$1t } from './assets/default-solid/rocket.svg.js';
+import { ReactComponent as Memo$1u } from './assets/default-solid/settings.svg.js';
+import { ReactComponent as Memo$1v } from './assets/default-solid/sun.svg.js';
+import { ReactComponent as Memo$1w } from './assets/default-solid/support.svg.js';
+import { ReactComponent as Memo$1x } from './assets/default-solid/unlock.svg.js';
+import { ReactComponent as Memo$1A } from './assets/default-solid/unpin.svg.js';
+import { ReactComponent as Memo$1y } from './assets/default-solid/weather-night.svg.js';
 
 const ICONS = {
   filled: {
@@ -231,19 +233,20 @@ const ICONS = {
     members: Memo$1k,
     moon: Memo$1l,
     mosaic: Memo$1m,
-    pencil: Memo$1n,
-    phone: Memo$1o,
-    'play-circle-outline': Memo$1p,
-    privacy: Memo$1q,
-    profile: Memo$1r,
-    rocket: Memo$1s,
-    settings: Memo$1t,
-    sun: Memo$1u,
-    support: Memo$1v,
-    unlock: Memo$1w,
-    'weather-night': Memo$1x,
-    pin: Memo$1y,
-    unpin: Memo$1z
+    pen: Memo$1n,
+    pencil: Memo$1o,
+    phone: Memo$1p,
+    'play-circle-outline': Memo$1q,
+    privacy: Memo$1r,
+    profile: Memo$1s,
+    rocket: Memo$1t,
+    settings: Memo$1u,
+    sun: Memo$1v,
+    support: Memo$1w,
+    unlock: Memo$1x,
+    'weather-night': Memo$1y,
+    pin: Memo$1z,
+    unpin: Memo$1A
   },
   outlined: {
     anchor: Memo,
@@ -303,49 +306,50 @@ const ICONS = {
     view: Memo$S,
     west: Memo$T,
     youtube: Memo$U,
-    address: Memo$1A,
-    alert: Memo$1B,
-    'auto-fix': Memo$1C,
-    'book-open-outline': Memo$1D,
-    bullhorn: Memo$1E,
-    calculator: Memo$1F,
-    'calendar-range': Memo$1G,
-    chat: Memo$1H,
-    'checkbox-circle-outline': Memo$1I,
-    'clock-outline': Memo$1J,
-    console: Memo$1K,
-    credentials: Memo$1L,
-    'credit-card': Memo$1M,
-    database: Memo$1N,
-    delete: Memo$1O,
-    doc: Memo$1P,
-    earth: Memo$1Q,
-    'email-remove-outline': Memo$1R,
-    'email-outline': Memo$1S,
-    'eye-off': Memo$1T,
-    eye: Memo$1U,
-    filter: Memo$1V,
-    folder: Memo$1W,
-    'help-circle-outline': Memo$1X,
-    id: Memo$1Y,
-    'information-outline': Memo$1Z,
-    lock: Memo$1_,
-    members: Memo$1$,
-    moon: Memo$20,
-    mosaic: Memo$21,
-    pencil: Memo$22,
-    phone: Memo$23,
-    'play-circle-outline': Memo$24,
-    privacy: Memo$25,
-    profile: Memo$26,
-    rocket: Memo$27,
-    settings: Memo$28,
-    sun: Memo$29,
-    support: Memo$2a,
-    unlock: Memo$2b,
-    'weather-night': Memo$2c,
-    pin: Memo$2d,
-    unpin: Memo$2e
+    address: Memo$1B,
+    alert: Memo$1C,
+    'auto-fix': Memo$1D,
+    'book-open-outline': Memo$1E,
+    bullhorn: Memo$1F,
+    calculator: Memo$1G,
+    'calendar-range': Memo$1H,
+    chat: Memo$1I,
+    'checkbox-circle-outline': Memo$1J,
+    'clock-outline': Memo$1K,
+    console: Memo$1L,
+    credentials: Memo$1M,
+    'credit-card': Memo$1N,
+    database: Memo$1O,
+    delete: Memo$1P,
+    doc: Memo$1Q,
+    earth: Memo$1R,
+    'email-remove-outline': Memo$1S,
+    'email-outline': Memo$1T,
+    'eye-off': Memo$1U,
+    eye: Memo$1V,
+    filter: Memo$1W,
+    folder: Memo$1X,
+    'help-circle-outline': Memo$1Y,
+    id: Memo$1Z,
+    'information-outline': Memo$1_,
+    lock: Memo$1$,
+    members: Memo$20,
+    moon: Memo$21,
+    mosaic: Memo$22,
+    pen: Memo$23,
+    pencil: Memo$24,
+    phone: Memo$25,
+    'play-circle-outline': Memo$26,
+    privacy: Memo$27,
+    profile: Memo$28,
+    rocket: Memo$29,
+    settings: Memo$2a,
+    sun: Memo$2b,
+    support: Memo$2c,
+    unlock: Memo$2d,
+    'weather-night': Memo$2e,
+    pin: Memo$2f,
+    unpin: Memo$2g
   }
 };
 

package/dist/@ultraviolet/icons/dist/components/Icon/SmallIcons.js

@@ -55,49 +55,50 @@ import { ReactComponent as Memo$R } from './assets/small/upload.svg.js';
 import { ReactComponent as Memo$S } from './assets/small/view.svg.js';
 import { ReactComponent as Memo$T } from './assets/small/west.svg.js';
 import { ReactComponent as Memo$U } from './assets/small/youtube.svg.js';
-import { ReactComponent as Memo$1A } from './assets/small-outline/address.svg.js';
-import { ReactComponent as Memo$1B } from './assets/small-outline/alert-circle.svg.js';
-import { ReactComponent as Memo$1C } from './assets/small-outline/auto-fix.svg.js';
-import { ReactComponent as Memo$1D } from './assets/small-outline/book-open-outline.svg.js';
-import { ReactComponent as Memo$1E } from './assets/small-outline/bullhorn.svg.js';
-import { ReactComponent as Memo$1F } from './assets/small-outline/calculator.svg.js';
-import { ReactComponent as Memo$1G } from './assets/small-outline/calendar-range.svg.js';
-import { ReactComponent as Memo$1H } from './assets/small-outline/chat.svg.js';
-import { ReactComponent as Memo$1I } from './assets/small-outline/check-circle.svg.js';
-import { ReactComponent as Memo$1J } from './assets/small-outline/clock-outline.svg.js';
-import { ReactComponent as Memo$1K } from './assets/small-outline/console.svg.js';
-import { ReactComponent as Memo$1L } from './assets/small-outline/credential.svg.js';
-import { ReactComponent as Memo$1M } from './assets/small-outline/credit-card.svg.js';
-import { ReactComponent as Memo$1N } from './assets/small-outline/database.svg.js';
-import { ReactComponent as Memo$1O } from './assets/small-outline/delete.svg.js';
-import { ReactComponent as Memo$1P } from './assets/small-outline/doc.svg.js';
-import { ReactComponent as Memo$1Q } from './assets/small-outline/earth.svg.js';
-import { ReactComponent as Memo$1R } from './assets/small-outline/email-remove.svg.js';
-import { ReactComponent as Memo$1S } from './assets/small-outline/email.svg.js';
-import { ReactComponent as Memo$1T } from './assets/small-outline/eye-off.svg.js';
-import { ReactComponent as Memo$1U } from './assets/small-outline/eye.svg.js';
-import { ReactComponent as Memo$1V } from './assets/small-outline/filter.svg.js';
-import { ReactComponent as Memo$1W } from './assets/small-outline/folder.svg.js';
-import { ReactComponent as Memo$1X } from './assets/small-outline/help-circle.svg.js';
-import { ReactComponent as Memo$1Y } from './assets/small-outline/id.svg.js';
-import { ReactComponent as Memo$1Z } from './assets/small-outline/information.svg.js';
-import { ReactComponent as Memo$1_ } from './assets/small-outline/lock.svg.js';
-import { ReactComponent as Memo$1$ } from './assets/small-outline/members.svg.js';
-import { ReactComponent as Memo$20 } from './assets/small-outline/moon.svg.js';
-import { ReactComponent as Memo$21 } from './assets/small-outline/mosaic.svg.js';
-import { ReactComponent as Memo$22 } from './assets/small-outline/pencil.svg.js';
-import { ReactComponent as Memo$23 } from './assets/small-outline/phone.svg.js';
-import { ReactComponent as Memo$2d } from './assets/small-outline/pin.svg.js';
-import { ReactComponent as Memo$24 } from './assets/small-outline/play.svg.js';
-import { ReactComponent as Memo$25 } from './assets/small-outline/privacy.svg.js';
-import { ReactComponent as Memo$26 } from './assets/small-outline/profile.svg.js';
-import { ReactComponent as Memo$27 } from './assets/small-outline/rocket.svg.js';
-import { ReactComponent as Memo$28 } from './assets/small-outline/settings.svg.js';
-import { ReactComponent as Memo$29 } from './assets/small-outline/sun.svg.js';
-import { ReactComponent as Memo$2a } from './assets/small-outline/support.svg.js';
-import { ReactComponent as Memo$2b } from './assets/small-outline/unlock.svg.js';
-import { ReactComponent as Memo$2e } from './assets/small-outline/unpin.svg.js';
-import { ReactComponent as Memo$2c } from './assets/small-outline/weather-night.svg.js';
+import { ReactComponent as Memo$1B } from './assets/small-outline/address.svg.js';
+import { ReactComponent as Memo$1C } from './assets/small-outline/alert-circle.svg.js';
+import { ReactComponent as Memo$1D } from './assets/small-outline/auto-fix.svg.js';
+import { ReactComponent as Memo$1E } from './assets/small-outline/book-open-outline.svg.js';
+import { ReactComponent as Memo$1F } from './assets/small-outline/bullhorn.svg.js';
+import { ReactComponent as Memo$1G } from './assets/small-outline/calculator.svg.js';
+import { ReactComponent as Memo$1H } from './assets/small-outline/calendar-range.svg.js';
+import { ReactComponent as Memo$1I } from './assets/small-outline/chat.svg.js';
+import { ReactComponent as Memo$1J } from './assets/small-outline/check-circle.svg.js';
+import { ReactComponent as Memo$1K } from './assets/small-outline/clock-outline.svg.js';
+import { ReactComponent as Memo$1L } from './assets/small-outline/console.svg.js';
+import { ReactComponent as Memo$1M } from './assets/small-outline/credential.svg.js';
+import { ReactComponent as Memo$1N } from './assets/small-outline/credit-card.svg.js';
+import { ReactComponent as Memo$1O } from './assets/small-outline/database.svg.js';
+import { ReactComponent as Memo$1P } from './assets/small-outline/delete.svg.js';
+import { ReactComponent as Memo$1Q } from './assets/small-outline/doc.svg.js';
+import { ReactComponent as Memo$1R } from './assets/small-outline/earth.svg.js';
+import { ReactComponent as Memo$1S } from './assets/small-outline/email-remove.svg.js';
+import { ReactComponent as Memo$1T } from './assets/small-outline/email.svg.js';
+import { ReactComponent as Memo$1U } from './assets/small-outline/eye-off.svg.js';
+import { ReactComponent as Memo$1V } from './assets/small-outline/eye.svg.js';
+import { ReactComponent as Memo$1W } from './assets/small-outline/filter.svg.js';
+import { ReactComponent as Memo$1X } from './assets/small-outline/folder.svg.js';
+import { ReactComponent as Memo$1Y } from './assets/small-outline/help-circle.svg.js';
+import { ReactComponent as Memo$1Z } from './assets/small-outline/id.svg.js';
+import { ReactComponent as Memo$1_ } from './assets/small-outline/information.svg.js';
+import { ReactComponent as Memo$1$ } from './assets/small-outline/lock.svg.js';
+import { ReactComponent as Memo$20 } from './assets/small-outline/members.svg.js';
+import { ReactComponent as Memo$21 } from './assets/small-outline/moon.svg.js';
+import { ReactComponent as Memo$22 } from './assets/small-outline/mosaic.svg.js';
+import { ReactComponent as Memo$23 } from './assets/small-outline/pen.svg.js';
+import { ReactComponent as Memo$24 } from './assets/small-outline/pencil.svg.js';
+import { ReactComponent as Memo$25 } from './assets/small-outline/phone.svg.js';
+import { ReactComponent as Memo$2f } from './assets/small-outline/pin.svg.js';
+import { ReactComponent as Memo$26 } from './assets/small-outline/play.svg.js';
+import { ReactComponent as Memo$27 } from './assets/small-outline/privacy.svg.js';
+import { ReactComponent as Memo$28 } from './assets/small-outline/profile.svg.js';
+import { ReactComponent as Memo$29 } from './assets/small-outline/rocket.svg.js';
+import { ReactComponent as Memo$2a } from './assets/small-outline/settings.svg.js';
+import { ReactComponent as Memo$2b } from './assets/small-outline/sun.svg.js';
+import { ReactComponent as Memo$2c } from './assets/small-outline/support.svg.js';
+import { ReactComponent as Memo$2d } from './assets/small-outline/unlock.svg.js';
+import { ReactComponent as Memo$2g } from './assets/small-outline/unpin.svg.js';
+import { ReactComponent as Memo$2e } from './assets/small-outline/weather-night.svg.js';
 import { ReactComponent as Memo$V } from './assets/small-solid/address.svg.js';
 import { ReactComponent as Memo$W } from './assets/small-solid/alert-circle.svg.js';
 import { ReactComponent as Memo$X } from './assets/small-solid/auto-fix.svg.js';
@@ -128,19 +129,20 @@ import { ReactComponent as Memo$1j } from './assets/small-solid/lock.svg.js';
 import { ReactComponent as Memo$1k } from './assets/small-solid/members.svg.js';
 import { ReactComponent as Memo$1l } from './assets/small-solid/moon.svg.js';
 import { ReactComponent as Memo$1m } from './assets/small-solid/mosaic.svg.js';
-import { ReactComponent as Memo$1n } from './assets/small-solid/pencil.svg.js';
-import { ReactComponent as Memo$1o } from './assets/small-solid/phone.svg.js';
-import { ReactComponent as Memo$1y } from './assets/small-solid/pin.svg.js';
-import { ReactComponent as Memo$1p } from './assets/small-solid/play.svg.js';
-import { ReactComponent as Memo$1q } from './assets/small-solid/privacy.svg.js';
-import { ReactComponent as Memo$1r } from './assets/small-solid/profile.svg.js';
-import { ReactComponent as Memo$1s } from './assets/small-solid/rocket.svg.js';
-import { ReactComponent as Memo$1t } from './assets/small-solid/settings.svg.js';
-import { ReactComponent as Memo$1u } from './assets/small-solid/sun.svg.js';
-import { ReactComponent as Memo$1v } from './assets/small-solid/support.svg.js';
-import { ReactComponent as Memo$1w } from './assets/small-solid/unlock.svg.js';
-import { ReactComponent as Memo$1z } from './assets/small-solid/unpin.svg.js';
-import { ReactComponent as Memo$1x } from './assets/small-solid/weather-night.svg.js';
+import { ReactComponent as Memo$1n } from './assets/small-solid/pen.svg.js';
+import { ReactComponent as Memo$1o } from './assets/small-solid/pencil.svg.js';
+import { ReactComponent as Memo$1p } from './assets/small-solid/phone.svg.js';
+import { ReactComponent as Memo$1z } from './assets/small-solid/pin.svg.js';
+import { ReactComponent as Memo$1q } from './assets/small-solid/play.svg.js';
+import { ReactComponent as Memo$1r } from './assets/small-solid/privacy.svg.js';
+import { ReactComponent as Memo$1s } from './assets/small-solid/profile.svg.js';
+import { ReactComponent as Memo$1t } from './assets/small-solid/rocket.svg.js';
+import { ReactComponent as Memo$1u } from './assets/small-solid/settings.svg.js';
+import { ReactComponent as Memo$1v } from './assets/small-solid/sun.svg.js';
+import { ReactComponent as Memo$1w } from './assets/small-solid/support.svg.js';
+import { ReactComponent as Memo$1x } from './assets/small-solid/unlock.svg.js';
+import { ReactComponent as Memo$1A } from './assets/small-solid/unpin.svg.js';
+import { ReactComponent as Memo$1y } from './assets/small-solid/weather-night.svg.js';
 
 const SMALL_ICONS = {
   filled: {
@@ -231,19 +233,20 @@ const SMALL_ICONS = {
     members: Memo$1k,
     moon: Memo$1l,
     mosaic: Memo$1m,
-    pencil: Memo$1n,
-    phone: Memo$1o,
-    'play-circle-outline': Memo$1p,
-    privacy: Memo$1q,
-    profile: Memo$1r,
-    rocket: Memo$1s,
-    settings: Memo$1t,
-    sun: Memo$1u,
-    support: Memo$1v,
-    unlock: Memo$1w,
-    'weather-night': Memo$1x,
-    pin: Memo$1y,
-    unpin: Memo$1z
+    pen: Memo$1n,
+    pencil: Memo$1o,
+    phone: Memo$1p,
+    'play-circle-outline': Memo$1q,
+    privacy: Memo$1r,
+    profile: Memo$1s,
+    rocket: Memo$1t,
+    settings: Memo$1u,
+    sun: Memo$1v,
+    support: Memo$1w,
+    unlock: Memo$1x,
+    'weather-night': Memo$1y,
+    pin: Memo$1z,
+    unpin: Memo$1A
   },
   outlined: {
     anchor: Memo,
@@ -303,49 +306,50 @@ const SMALL_ICONS = {
     view: Memo$S,
     west: Memo$T,
     youtube: Memo$U,
-    address: Memo$1A,
-    alert: Memo$1B,
-    'auto-fix': Memo$1C,
-    'book-open-outline': Memo$1D,
-    bullhorn: Memo$1E,
-    calculator: Memo$1F,
-    'calendar-range': Memo$1G,
-    chat: Memo$1H,
-    'checkbox-circle-outline': Memo$1I,
-    'clock-outline': Memo$1J,
-    console: Memo$1K,
-    credentials: Memo$1L,
-    'credit-card': Memo$1M,
-    database: Memo$1N,
-    delete: Memo$1O,
-    doc: Memo$1P,
-    earth: Memo$1Q,
-    'email-remove-outline': Memo$1R,
-    'email-outline': Memo$1S,
-    'eye-off': Memo$1T,
-    eye: Memo$1U,
-    filter: Memo$1V,
-    folder: Memo$1W,
-    'help-circle-outline': Memo$1X,
-    id: Memo$1Y,
-    'information-outline': Memo$1Z,
-    lock: Memo$1_,
-    members: Memo$1$,
-    moon: Memo$20,
-    mosaic: Memo$21,
-    pencil: Memo$22,
-    phone: Memo$23,
-    'play-circle-outline': Memo$24,
-    privacy: Memo$25,
-    profile: Memo$26,
-    rocket: Memo$27,
-    settings: Memo$28,
-    sun: Memo$29,
-    support: Memo$2a,
-    unlock: Memo$2b,
-    'weather-night': Memo$2c,
-    pin: Memo$2d,
-    unpin: Memo$2e
+    address: Memo$1B,
+    alert: Memo$1C,
+    'auto-fix': Memo$1D,
+    'book-open-outline': Memo$1E,
+    bullhorn: Memo$1F,
+    calculator: Memo$1G,
+    'calendar-range': Memo$1H,
+    chat: Memo$1I,
+    'checkbox-circle-outline': Memo$1J,
+    'clock-outline': Memo$1K,
+    console: Memo$1L,
+    credentials: Memo$1M,
+    'credit-card': Memo$1N,
+    database: Memo$1O,
+    delete: Memo$1P,
+    doc: Memo$1Q,
+    earth: Memo$1R,
+    'email-remove-outline': Memo$1S,
+    'email-outline': Memo$1T,
+    'eye-off': Memo$1U,
+    eye: Memo$1V,
+    filter: Memo$1W,
+    folder: Memo$1X,
+    'help-circle-outline': Memo$1Y,
+    id: Memo$1Z,
+    'information-outline': Memo$1_,
+    lock: Memo$1$,
+    members: Memo$20,
+    moon: Memo$21,
+    mosaic: Memo$22,
+    pen: Memo$23,
+    pencil: Memo$24,
+    phone: Memo$25,
+    'play-circle-outline': Memo$26,
+    privacy: Memo$27,
+    profile: Memo$28,
+    rocket: Memo$29,
+    settings: Memo$2a,
+    sun: Memo$2b,
+    support: Memo$2c,
+    unlock: Memo$2d,
+    'weather-night': Memo$2e,
+    pin: Memo$2f,
+    unpin: Memo$2g
   }
 };
 

package/dist/@ultraviolet/icons/dist/components/Icon/assets/default-outline/pen.svg.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgPen = function SvgPen(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M17.137 2.863a.81.81 0 0 0-1.149 0l-.876.876 1.15 1.149.875-.876a.81.81 0 0 0 0-1.149M15.2 5.949l-1.149-1.15L4.014 14.838a3 3 0 0 0-.754 1.265l-.27.908.908-.27a3 3 0 0 0 1.265-.754zm-.273-4.147a2.313 2.313 0 0 1 3.27 3.27L6.225 17.048a4.5 4.5 0 0 1-1.897 1.13l-2.238.667a.75.75 0 0 1-.933-.933l.667-2.238a4.5 4.5 0 0 1 1.13-1.897z",
+    clipRule: "evenodd"
+  })));
+};
+var Memo = /*#__PURE__*/memo(SvgPen);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/Icon/assets/default-solid/pen.svg.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgPen = function SvgPen(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    fill: "none",
+    viewBox: "0 0 20 20"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.154-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343"
+  })));
+};
+var Memo = /*#__PURE__*/memo(SvgPen);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/Icon/assets/small-outline/pen.svg.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgPen = function SvgPen(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none",
+    viewBox: "0 0 16 16"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M10.232 1.982a2.5 2.5 0 1 1 3.536 3.536l-7.262 7.261a3.5 3.5 0 0 1-1.135.759l-2.047.848a1.5 1.5 0 0 1-1.96-1.96l.693.287-.693-.287.848-2.047a3.5 3.5 0 0 1 .759-1.135zm2.475 1.06a1 1 0 0 0-1.414 0L4.03 10.306a2 2 0 0 0-.433.648l-.693-.287.693.287L2.75 13l2.047-.848c.243-.1.463-.248.649-.433l7.261-7.262a1 1 0 0 0 0-1.414",
+    clipRule: "evenodd"
+  })));
+};
+var Memo = /*#__PURE__*/memo(SvgPen);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/Icon/assets/small-solid/pen.svg.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgPen = function SvgPen(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none",
+    viewBox: "0 0 16 16"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M11.013 2.513a1.75 1.75 0 0 1 2.475 2.474L6.226 12.25a2.8 2.8 0 0 1-.892.596l-2.047.848a.75.75 0 0 1-.98-.98l.848-2.047a2.8 2.8 0 0 1 .596-.892z",
+    clipRule: "evenodd"
+  })));
+};
+var Memo = /*#__PURE__*/memo(SvgPen);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/ProductIcon/Icons.js

@@ -1,4 +1,5 @@
 import { ReactComponent as Memo$1N } from './assets/abuse.svg.js';
+import { ReactComponent as Memo$2d } from './assets/account-experience.svg.js';
 import { ReactComponent as Memo } from './assets/additional-disk.svg.js';
 import { ReactComponent as Memo$18 } from './assets/advanced-settings.svg.js';
 import { ReactComponent as Memo$1 } from './assets/ansible.svg.js';
@@ -107,6 +108,7 @@ import { ReactComponent as Memo$s } from './assets/rpn-san.svg.js';
 import { ReactComponent as Memo$t } from './assets/rpn-v1.svg.js';
 import { ReactComponent as Memo$u } from './assets/rpn-v2.svg.js';
 import { ReactComponent as Memo$v } from './assets/rpn.svg.js';
+import { ReactComponent as Memo$2e } from './assets/saving-plan.svg.js';
 import { ReactComponent as Memo$w } from './assets/sdk-go.svg.js';
 import { ReactComponent as Memo$x } from './assets/sdk-python.svg.js';
 import { ReactComponent as Memo$1O } from './assets/secret-manager.svg.js';
@@ -281,7 +283,9 @@ const PRODUCT_ICONS = {
   vpsProServers: Memo$29,
   vpsServers: Memo$2a,
   vpsStartServers: Memo$2b,
-  environmentalFootprintCalculator: Memo$2c
+  environmentalFootprintCalculator: Memo$2c,
+  accountExperience: Memo$2d,
+  savingPlan: Memo$2e
 };
 
 export { PRODUCT_ICONS };

package/dist/@ultraviolet/icons/dist/components/ProductIcon/assets/account-experience.svg.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _g;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgAccountExperience = function SvgAccountExperience(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 64,
+    height: 64,
+    fill: "none",
+    viewBox: "0 0 64 64"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    className: "account-experience"
+  }, /*#__PURE__*/React.createElement("g", {
+    className: ".Square"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "#F1EEFC",
+    className: "fillWeak"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 16C0 7.163 7.163 0 16 0h32c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H16C7.163 64 0 56.837 0 48z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M48 2H16C8.268 2 2 8.268 2 16v32c0 7.732 6.268 14 14 14h32c7.732 0 14-6.268 14-14V16c0-7.732-6.268-14-14-14M16 0C7.163 0 0 7.163 0 16v32c0 8.837 7.163 16 16 16h32c8.837 0 16-7.163 16-16V16c0-8.837-7.163-16-16-16z",
+    clipRule: "evenodd"
+  }))), /*#__PURE__*/React.createElement("g", {
+    fill: "#521094",
+    fillRule: "evenodd",
+    className: "fill",
+    clipRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M32 31a5.895 5.895 0 1 0 0-11.79A5.895 5.895 0 0 0 32 31m0 2a7.895 7.895 0 1 0 0-15.79A7.895 7.895 0 0 0 32 33m-3 4.158a6 6 0 0 0-6 6v5.631a1 1 0 1 1-2 0v-5.631a8 8 0 0 1 8-8h10.5a1 1 0 1 1 0 2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M32 11c-11.046 0-20 8.954-20 20s8.954 20 20 20q1.144 0 2.254-.126l.223 1.988Q33.256 52.999 32 53c-12.15 0-22-9.85-22-22S19.85 9 32 9s22 9.85 22 22c0 2.345-.367 4.605-1.048 6.727l-1.904-.61A20 20 0 0 0 52 31c0-11.046-8.954-20-20-20"
+  })), /*#__PURE__*/React.createElement("g", {
+    fill: "#A060F6",
+    fillRule: "evenodd",
+    className: "fillStrong",
+    clipRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M38.702 33a1 1 0 0 1 1-1h5.56a1 1 0 0 1 1 1v3.25a9.4 9.4 0 0 1 1.79 1.009l3.07-1.703a1 1 0 0 1 1.342.36l2.78 4.63a1 1 0 0 1-.372 1.388l-3.09 1.716a9 9 0 0 1 .001 1.69l3.09 1.715a1 1 0 0 1 .371 1.39l-2.78 4.63a1 1 0 0 1-1.343.36l-3.06-1.7c-.555.4-1.158.742-1.798 1.016V56a1 1 0 0 1-1 1h-5.561a1 1 0 0 1-1-1v-3.25a9.4 9.4 0 0 1-1.778-1l-3.032 1.684a1 1 0 0 1-1.343-.36l-2.78-4.63a1 1 0 0 1 .372-1.389l3.042-1.688a9 9 0 0 1 .001-1.743l-3.043-1.69a1 1 0 0 1-.372-1.389l2.78-4.63a1 1 0 0 1 1.343-.36l3.04 1.689a9.4 9.4 0 0 1 1.77-.994zm2 1v2.937a1 1 0 0 1-.679.947 7.4 7.4 0 0 0-2.36 1.321 1 1 0 0 1-1.126.106l-2.77-1.538-1.751 2.915 2.74 1.52a1 1 0 0 1 .498 1.057 6.8 6.8 0 0 0-.002 2.462 1 1 0 0 1-.498 1.055l-2.738 1.52 1.75 2.914 2.763-1.533a1 1 0 0 1 1.126.107 7.4 7.4 0 0 0 2.368 1.327 1 1 0 0 1 .679.947V55h3.56v-2.936a1 1 0 0 1 .679-.947 7.4 7.4 0 0 0 2.385-1.342 1 1 0 0 1 1.128-.109l2.793 1.55 1.75-2.914-2.783-1.545a1 1 0 0 1-.498-1.052 6.8 6.8 0 0 0-.002-2.418 1 1 0 0 1 .499-1.053l2.784-1.546-1.75-2.915-2.8 1.555a1 1 0 0 1-1.128-.108 7.4 7.4 0 0 0-2.378-1.336 1 1 0 0 1-.678-.947V34z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M42.5 42a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M38 44.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0"
+  })))));
+};
+var Memo = /*#__PURE__*/memo(SvgAccountExperience);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/ProductIcon/assets/saving-plan.svg.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _g, _defs;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSavingPlan = function SvgSavingPlan(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 64,
+    height: 64,
+    fill: "none",
+    viewBox: "0 0 64 64"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    className: "saving-plan",
+    clipPath: "url(#a)"
+  }, /*#__PURE__*/React.createElement("g", {
+    className: ".Square"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "#F1EEFC",
+    className: "fillWeak"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 16C0 7.163 7.163 0 16 0h32c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H16C7.163 64 0 56.837 0 48z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M48 2H16C8.268 2 2 8.268 2 16v32c0 7.732 6.268 14 14 14h32c7.732 0 14-6.268 14-14V16c0-7.732-6.268-14-14-14M16 0C7.163 0 0 7.163 0 16v32c0 8.837 7.163 16 16 16h32c8.837 0 16-7.163 16-16V16c0-8.837-7.163-16-16-16z",
+    clipRule: "evenodd"
+  }))), /*#__PURE__*/React.createElement("g", {
+    fill: "#A060F6",
+    className: "fillStrong"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M11 22.334c0-.567.448-1.026 1-1.026h40c.552 0 1 .46 1 1.026s-.448 1.025-1 1.025H12c-.552 0-1-.459-1-1.025",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17 16.18c-2.21 0-4 1.837-4 4.103v22.564c0 2.266 1.79 4.102 4 4.102h18.5l1.5 2.052H17c-3.314 0-6-2.755-6-6.154V20.283c0-3.399 2.686-6.154 6-6.154h2.5l1 2.051h3l1-2.051h15l1 2.051h3l1-2.051H47c3.314 0 6 2.755 6 6.154V36h-2V20.283c0-2.266-1.79-4.103-4-4.103z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M28 38a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v2h4z",
+    clipRule: "evenodd"
+  })), /*#__PURE__*/React.createElement("g", {
+    fill: "#521094",
+    className: "fill"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M22 11.051c-.552 0-1 .46-1 1.026v4.103c0 .566.448 1.025 1 1.025s1-.46 1-1.025v-4.103c0-.566-.448-1.026-1-1.026M22 9c1.657 0 3 1.378 3 3.077v4.103c0 1.699-1.343 3.076-3 3.076s-3-1.377-3-3.076v-4.103C19 10.377 20.343 9 22 9m20 2.051c-.552 0-1 .46-1 1.026v4.103c0 .566.448 1.025 1 1.025s1-.46 1-1.025v-4.103c0-.566-.448-1.026-1-1.026M42 9c1.657 0 3 1.378 3 3.077v4.103c0 1.699-1.343 3.076-3 3.076s-3-1.377-3-3.076v-4.103C39 10.377 40.343 9 42 9M18 30a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v2h4zm4 0a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v2h4zm4 0a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v2h4zm-26 8a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v2h4zm29.856-2.708a1 1 0 0 1 .294.708v9.572l2.857.018a1 1 0 0 1 .713 1.694l-11 11.41a1 1 0 0 1-1.44 0l-11-11.436a1 1 0 0 1 .727-1.693l2.843.019v-9.559a1 1 0 0 1 .998-1l14.3-.025a1 1 0 0 1 .708.292M39.85 37.023v9.567a1 1 0 0 1-1.007 1l-1.479-.01 8.637 8.978 8.66-8.983-1.517-.01a1 1 0 0 1-.994-1v-9.563z",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m43.628 50.143-.836-.671 5.918-7.315.836.671zm4.642-.033q-.836 0-1.309-.44-.473-.45-.473-1.221v-.077q0-.78.473-1.221.473-.45 1.309-.451.814 0 1.298.451.484.44.484 1.221v.077q0 .77-.473 1.221-.473.44-1.309.44m0-.902q.32 0 .495-.198a.72.72 0 0 0 .187-.517v-.176a.72.72 0 0 0-.187-.517q-.175-.198-.495-.198a.66.66 0 0 0-.506.198.75.75 0 0 0-.176.517v.176a.75.75 0 0 0 .176.517.66.66 0 0 0 .506.198M44.068 45.6q-.836 0-1.309-.44-.473-.45-.473-1.221v-.077q0-.78.473-1.221.473-.45 1.309-.451.814 0 1.298.451.484.44.484 1.221v.077q0 .77-.473 1.221-.473.44-1.309.44m0-.902q.32 0 .495-.198a.72.72 0 0 0 .187-.517v-.176a.72.72 0 0 0-.187-.517q-.175-.198-.495-.198a.66.66 0 0 0-.506.198.75.75 0 0 0-.176.517v.176a.75.75 0 0 0 .176.517.66.66 0 0 0 .506.198"
+  })))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "a",
+    className: "a"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h64v64H0z"
+  })))));
+};
+var Memo = /*#__PURE__*/memo(SvgSavingPlan);
+
+export { Memo as ReactComponent };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, MouseEventHandler, ComponentProps } from 'react';
+import { ReactNode, MouseEventHandler, ComponentProps, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
@@ -145,6 +145,10 @@ type EstimateCostProps = {
      * Hide the total price at the bottom of the component.
      */
     hideTotal?: boolean;
+    /**
+     * Hide the hourly price in total section at the bottom of the component.
+     */
+    hideHourlyPriceOnTotal?: boolean;
     /**
      * Show a badge beta on the total price with how much discount is applied.
      */
@@ -419,14 +423,6 @@ type MessageProps = {
     align?: 'left' | 'right';
 };
 
-declare const _default: {
-    readonly 'navigation.pin.tooltip': "Pin product";
-    readonly 'navigation.unpin.tooltip': "Unpin product";
-    readonly 'navigation.pinned.item.group.label': "Pinned items";
-    readonly 'navigation.expand.button': "Expand sidebar";
-    readonly 'navigation.collapse.button': "Collapse sidebar";
-};
-
 type NavigationProps = {
     children: ReactNode;
     /**
@@ -436,48 +432,12 @@ type NavigationProps = {
      * some part of your logo
      */
     logo?: ReactNode | ((expanded: boolean) => ReactNode);
-    /**
-     * This enable / disable the pinned feature of the navigation
-     * Pinned allows the use to pin (or favorite) some items in the navigation
-     */
-    pinnedFeature?: boolean;
-    /**
-     * This define how many items can be pinned at the same time.
-     * If you want to disable the limit just set `Infinity` to this prop
-     */
-    pinLimit?: number;
-    /**
-     * The initial pinned items. This should be an array of labels you've set on
-     * your `<Navigation.Item>`
-     */
-    initialPinned?: string[];
-    /**
-     * The initial expanded state of the navigation. If set to true the
-     * navigation will be expanded by default otherwise it will be collapsed
-     */
-    initialExpanded?: boolean;
-    /**
-     * This function is triggered when the user click on the pin/unpin button
-     * of an item
-     */
-    onClickPinUnpin?: (pinned: string[]) => void;
-    locales?: typeof _default;
-    /**
-     * This function is triggered when user click on expand button on the footer
-     * of the navigation. This is not triggered when the user resize the navigation
-     * and it automatically collapse / expand.
-     */
-    onClickExpand?: (expanded: boolean) => void;
-    className?: string;
-    /**
-     * It defines the initial width of the navigation.
-     */
-    width?: number;
     /**
      * This function is called when resize occur using the vertical bar on the left of the navigation.
      */
     onWidthResize?: (width: number) => void;
     id?: string;
+    className?: string;
 };
 /**
  * Navigation is a component that allows you to create a sidebar navigation.
@@ -485,10 +445,15 @@ type NavigationProps = {
  * to make it work in your application.
  */
 declare const Navigation: {
-    ({ children, logo, pinnedFeature, onClickPinUnpin, onClickExpand, initialPinned, initialExpanded, locales, pinLimit, width, onWidthResize, className, id, }: NavigationProps): _emotion_react_jsx_runtime.JSX.Element;
+    ({ children, logo, onWidthResize, className, id, }: NavigationProps): _emotion_react_jsx_runtime.JSX.Element;
     Group: ({ children, label }: {
         children: ReactNode;
-        label: string;
+        label: string; /**
+         * The logo to be displayed in header of the navigation
+         * It can be a component or a function. The function will retrun you
+         * expanded state of the navigation so you can decide to show/hide
+         * some part of your logo
+         */
     }) => _emotion_react_jsx_runtime.JSX.Element | null;
     Item: ({ children, categoryIcon, categoryIconVariant, label, subLabel, badgeText, badgeSentiment, href, onClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, toggleMenu, }: {
         children?: ReactNode;
@@ -514,6 +479,68 @@ declare const Navigation: {
     Separator: () => _emotion_react_jsx_runtime.JSX.Element;
 };
 
+declare const _default: {
+    readonly 'navigation.pin.tooltip': "Pin product";
+    readonly 'navigation.unpin.tooltip': "Unpin product";
+    readonly 'navigation.pinned.item.group.label': "Pinned items";
+    readonly 'navigation.expand.button': "Expand sidebar";
+    readonly 'navigation.collapse.button': "Collapse sidebar";
+};
+
+type ContextProps = {
+    expanded: boolean;
+    toggleExpand: (toggle?: boolean) => void;
+    animation: boolean | 'expand' | 'collapse';
+    pinnedFeature?: boolean;
+    onClickPinUnpin?: (pinned: string[]) => void;
+    pinItem: (item: string) => void;
+    unpinItem: (item: string) => void;
+    pinnedItems: string[];
+    pinLimit: number;
+    navigationRef: RefObject<HTMLDivElement>;
+    locales: typeof _default;
+    width: number;
+    setWidth: (width: number) => void;
+};
+declare const useNavigation: () => ContextProps;
+type NavigationProviderProps = {
+    children: ReactNode;
+    initialWidth?: number;
+    /**
+     * This enable / disable the pinned feature of the navigation
+     * Pinned allows the use to pin (or favorite) some items in the navigation
+     */
+    pinnedFeature?: boolean;
+    /**
+     * This define how many items can be pinned at the same time.
+     * If you want to disable the limit just set `Infinity` to this prop
+     */
+    pinLimit?: number;
+    /**
+     * The initial pinned items. This should be an array of labels you've set on
+     * your `<Navigation.Item>`
+     */
+    initialPinned?: string[];
+    /**
+     * The initial expanded state of the navigation. If set to true the
+     * navigation will be expanded by default otherwise it will be collapsed
+     */
+    initialExpanded?: boolean;
+    /**
+     * This function is triggered when the user click on the pin/unpin button
+     * of an item
+     */
+    onClickPinUnpin?: (pinned: string[]) => void;
+    locales?: typeof _default;
+    /**
+     * This function is triggered when user click on expand button on the footer
+     * of the navigation. This is not triggered when the user resize the navigation
+     * and it automatically collapse / expand.
+     */
+    onClickExpand?: (expanded: boolean) => void;
+};
+declare const NavigationProvider: ({ children, pinnedFeature, onClickPinUnpin, initialPinned, initialExpanded, locales, pinLimit, onClickExpand, initialWidth, }: NavigationProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
+
 type FAQProps = {
     description: string;
     productIconName?: ComponentProps<typeof ProductIcon>['name'];
@@ -571,4 +598,4 @@ declare const SteppedListContainer: {
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
-export { CodeEditor, ContentCard, ContentCardGroup, Conversation, CustomerSatisfaction, EstimateCost, FAQ, Navigation, SteppedListContainer, _default$1 as estimateCostDefaultLocales };
+export { CodeEditor, ContentCard, ContentCardGroup, Conversation, CustomerSatisfaction, EstimateCost, FAQ, Navigation, NavigationProvider, SteppedListContainer, _default$1 as estimateCostDefaultLocales, useNavigation };

package/dist/src/components/EstimateCost/EstimateCostContent.js

@@ -69,6 +69,7 @@ const EstimateCostContent = ({
   disableOverlayRight = false,
   hideTimeUnit = false,
   hideTotal = false,
+  hideHourlyPriceOnTotal = false,
   discount = 0,
   OverlayRight,
   OverlayLeft,
@@ -247,7 +248,7 @@ const EstimateCostContent = ({
                       maximumFractionDigits: isLongFractionDigits ? maximumFractionDigitsLong[iteration.unit] : maximumFractionDigits[iteration.unit]
                     })}` : null]
                   })
-                }), totalPrice.hourly > 0 && totalPrice.hourly !== totalPrice.total && totalPrice.total > 0 ? jsx(RightAlignedText, {
+                }), hideHourlyPriceOnTotal && totalPrice.hourly > 0 && totalPrice.hourly !== totalPrice.total && totalPrice.total > 0 ? jsx(RightAlignedText, {
                   as: "p",
                   variant: "body",
                   children: jsxs(LineThrough, {

package/dist/src/components/Navigation/Navigation.js

@@ -1,11 +1,8 @@
 import { NavigationContent } from './NavigationContent.js';
-import { NavigationProvider } from './NavigationProvider.js';
 import { Group } from './components/Group.js';
 import { Item } from './components/Item.js';
 import { PinnedItems } from './components/PinnedItems.js';
 import { Separator } from './components/Separator.js';
-import { NAVIGATION_WIDTH } from './constants.js';
-import NavigationLocales from './locales/en.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 /**
@@ -16,33 +13,15 @@ import { jsx } from '@emotion/react/jsx-runtime';
 const Navigation = ({
   children,
   logo,
-  pinnedFeature = false,
-  onClickPinUnpin,
-  onClickExpand,
-  initialPinned,
-  initialExpanded = true,
-  locales = NavigationLocales,
-  pinLimit = 7,
-  width = NAVIGATION_WIDTH,
   onWidthResize,
   className,
   id
-}) => jsx(NavigationProvider, {
-  onClickPinUnpin: onClickPinUnpin,
-  pinnedFeature: pinnedFeature,
-  locales: locales,
-  initialPinned: initialPinned,
-  pinLimit: pinLimit,
-  initialExpanded: initialExpanded,
-  children: jsx(NavigationContent, {
-    onClickExpand: onClickExpand,
-    logo: logo,
-    className: className,
-    width: width,
-    onWidthResize: onWidthResize,
-    id: id,
-    children: children
-  })
+}) => jsx(NavigationContent, {
+  logo: logo,
+  className: className,
+  onWidthResize: onWidthResize,
+  id: id,
+  children: children
 });
 Navigation.Group = Group;
 Navigation.Item = Item;

package/dist/src/components/Navigation/NavigationContent.js

@@ -2,7 +2,7 @@ import _styled from '@emotion/styled/base';
 import { Tooltip, Button, Stack } from '@ultraviolet/ui';
 import { useRef, useCallback, useState, useEffect } from 'react';
 import { useNavigation } from './NavigationProvider.js';
-import { ANIMATION_DURATION, NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_COLLASPED_WIDTH } from './constants.js';
+import { NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_COLLASPED_WIDTH, ANIMATION_DURATION } from './constants.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -67,14 +67,24 @@ const Slider = /*#__PURE__*/_styled("div", {
 const NavigationContent = ({
   children,
   logo,
-  onClickExpand,
-  width,
   onWidthResize,
   className,
   id
 }) => {
+  const context = useNavigation();
+  if (!context) {
+    throw new Error('Navigation should be inside NavigationProvider to use it properly.');
+  }
+  const {
+    setWidth,
+    width,
+    expanded,
+    toggleExpand,
+    animation,
+    locales,
+    navigationRef
+  } = context;
   const sliderRef = useRef(null);
-  const navigationRef = useRef(null);
   const contentRef = useRef(null);
   const isScrollAtBottom = useCallback(() => {
     if (contentRef.current) {
@@ -109,27 +119,6 @@ const NavigationContent = ({
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [contentRef.current]);
-  const {
-    expanded,
-    setExpanded,
-    animation,
-    setAnimation,
-    locales
-  } = useNavigation();
-
-  // This function will be triggered when expand/collapse button is clicked
-  const toggleExpand = useCallback(() => {
-    onClickExpand?.(!expanded);
-    if (navigationRef.current) {
-      navigationRef.current.style.width = '';
-    }
-    setAnimation(expanded ? 'collapse' : 'expand');
-    setTimeout(() => {
-      setExpanded();
-      setFooterHasOverflowStyle(isScrollAtBottom());
-      setAnimation(false);
-    }, ANIMATION_DURATION);
-  }, [expanded, isScrollAtBottom, onClickExpand, setAnimation, setExpanded]);
 
   // It will handle the resize of the navigation when the user drag the vertical bar
   useEffect(() => {
@@ -168,6 +157,7 @@ const NavigationContent = ({
         if (navigationRef.current) {
           if (!shouldCollapseOnMouseUp && !shouldExpandOnMouseUp) {
             onWidthResize?.(navigationRef.current.offsetWidth);
+            setWidth?.(navigationRef.current.offsetWidth);
           }
           if (!expanded) {
             navigationRef.current.style.width = '';
@@ -186,7 +176,7 @@ const NavigationContent = ({
       // eslint-disable-next-line react-hooks/exhaustive-deps
       sliderRef.current?.removeEventListener('mousedown', mousedown);
     };
-  }, [expanded, onWidthResize, toggleExpand]);
+  }, [expanded, navigationRef, onWidthResize, setWidth, toggleExpand]);
   return jsxs(StyledNav, {
     className: className,
     id: id,
@@ -218,7 +208,7 @@ const NavigationContent = ({
               sentiment: "neutral",
               size: "small",
               icon: expanded ? 'arrow-left-double' : 'arrow-right-double',
-              onClick: toggleExpand
+              onClick: () => toggleExpand()
             })
           })
         })]

package/dist/src/components/Navigation/NavigationProvider.js

@@ -1,31 +1,63 @@
-import { useReducer, useState, useCallback, useMemo, createContext, useContext } from 'react';
+import { useContext, useState, useRef, useCallback, useMemo, createContext } from 'react';
+import { ANIMATION_DURATION, NAVIGATION_WIDTH } from './constants.js';
 import NavigationLocales from './locales/en.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const NavigationContext = /*#__PURE__*/createContext({
   expanded: true,
-  setExpanded: () => {},
+  /**
+   * This function will trigger the expand/collapse of the navigation and
+   * will also trigger the animation
+   */
+  toggleExpand: () => {},
   animation: false,
-  setAnimation: () => {},
   locales: NavigationLocales,
   pinItem: () => {},
   unpinItem: () => {},
   pinnedItems: [],
-  pinLimit: 7
+  pinLimit: 7,
+  navigationRef: {
+    current: null
+  },
+  width: NAVIGATION_WIDTH,
+  setWidth: () => {}
 });
 const useNavigation = () => useContext(NavigationContext);
 const NavigationProvider = ({
   children,
-  pinnedFeature,
+  pinnedFeature = false,
   onClickPinUnpin,
   initialPinned,
-  initialExpanded,
-  locales,
-  pinLimit
+  initialExpanded = true,
+  locales = NavigationLocales,
+  pinLimit = 7,
+  onClickExpand,
+  initialWidth = NAVIGATION_WIDTH
 }) => {
-  const [expanded, setExpanded] = useReducer(state => !state, initialExpanded);
+  const [expanded, setExpanded] = useState(initialExpanded);
   const [pinnedItems, setPinnedItems] = useState(initialPinned ?? []);
   const [animation, setAnimation] = useState(false);
+  const [width, setWidth] = useState(initialWidth);
+  const navigationRef = useRef(null);
+
+  // This function will be triggered when expand/collapse button is clicked
+  const toggleExpand = useCallback(toggle => {
+    if (typeof toggle !== 'boolean' && toggle !== undefined) {
+      throw new Error(`toggleExpand only accepts boolean or undefined as parameter. You most likely did <button onClick={toggleExpand}> instead of <button onClick={() => toggleExpand()}>`);
+    }
+    if (toggle !== undefined && toggle === expanded) {
+      return;
+    }
+    onClickExpand?.(!expanded);
+    if (navigationRef.current) {
+      navigationRef.current.style.width = '';
+    }
+    setAnimation(expanded ? 'collapse' : 'expand');
+    setTimeout(() => {
+      setExpanded(toggle !== undefined ? toggle : !expanded);
+      setAnimation(false);
+    }, ANIMATION_DURATION);
+  }, [expanded, onClickExpand, setAnimation, setExpanded]);
   const pinItem = useCallback(item => {
     setPinnedItems([...pinnedItems, item]);
     onClickPinUnpin?.(pinnedItems);
@@ -36,7 +68,7 @@ const NavigationProvider = ({
   }, [onClickPinUnpin, pinnedItems]);
   const value = useMemo(() => ({
     expanded,
-    setExpanded,
+    toggleExpand,
     pinnedItems,
     pinItem,
     unpinItem,
@@ -44,8 +76,11 @@ const NavigationProvider = ({
     locales,
     pinLimit,
     animation,
-    setAnimation
-  }), [expanded, pinnedItems, pinItem, unpinItem, pinnedFeature, locales, pinLimit, animation]);
+    setAnimation,
+    navigationRef,
+    width,
+    setWidth
+  }), [expanded, toggleExpand, pinnedItems, pinItem, unpinItem, pinnedFeature, locales, pinLimit, animation, width]);
   return jsx(NavigationContext.Provider, {
     value: value,
     children: children

package/dist/src/components/Navigation/components/Group.js

@@ -26,7 +26,7 @@ const Group = ({
 }) => {
   const context = useNavigation();
   if (!context) {
-    throw new Error('Navigation.Group can only be used inside a Navigation');
+    throw new Error('Navigation.Group can only be used inside a NavigationProvider.');
   }
   const {
     expanded,

package/dist/src/components/Navigation/components/Item.js

@@ -134,7 +134,7 @@ const Item = ({
 }) => {
   const context = useNavigation();
   if (!context) {
-    throw new Error('Navigation.Item can only be used inside a Navigation');
+    throw new Error('Navigation.Item can only be used inside a NavigationProvider.');
   }
   const {
     expanded,
@@ -251,7 +251,7 @@ const Item = ({
               as: "span",
               variant: "bodySmallStrong",
               sentiment: active ? 'primary' : 'neutral',
-              prominence: (categoryIcon || !hasParents) && !active ? 'strong' : 'weak',
+              prominence: (categoryIcon || !hasParents) && !active ? 'strong' : 'default',
               animation: animation,
               disabled: disabled,
               children: label
@@ -296,7 +296,7 @@ const Item = ({
           }) : null, hasHrefAndNoChildren ? jsx(AnimatedIcon, {
             name: "open-in-new",
             sentiment: "neutral",
-            prominence: "weak",
+            prominence: "default",
             disabled: disabled
           }) : null, children ? jsxs(Stack, {
             gap: 1,

package/dist/src/components/Navigation/components/PinnedItems.js

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
 const PinnedItems = () => {
   const context = useNavigation();
   if (!context) {
-    throw new Error('Navigation.PinnedItems can only be used inside a Navigation');
+    throw new Error('Navigation.PinnedItems can only be used inside a NavigationProvider.');
   }
   const {
     locales,

package/dist/src/index.js

@@ -6,5 +6,6 @@ export { default as estimateCostDefaultLocales } from './components/EstimateCost
 export { CustomerSatisfaction } from './components/CustomerSatisfaction/index.js';
 export { Conversation } from './components/Conversation/index.js';
 export { Navigation } from './components/Navigation/Navigation.js';
+export { NavigationProvider, useNavigation } from './components/Navigation/NavigationProvider.js';
 export { FAQ } from './components/FAQ/index.js';
 export { SteppedListContainer } from './components/SteppedListCard/SteppedListContainer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -43,12 +43,12 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@types/react": "18.2.78",
+    "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@ultraviolet/icons": "2.12.4",
-    "@ultraviolet/illustrations": "1.7.0"
+    "@ultraviolet/icons": "2.12.5",
+    "@ultraviolet/illustrations": "1.7.1"
   },
   "dependencies": {
     "@uiw/codemirror-extensions-langs": "4.21.25",
@@ -56,7 +56,7 @@
     "@uiw/react-codemirror": "4.21.25",
     "react-intersection-observer": "9.8.2",
     "@ultraviolet/themes": "1.10.0",
-    "@ultraviolet/ui": "1.47.1"
+    "@ultraviolet/ui": "1.48.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",