@infonomic/uikit 5.16.0 → 5.17.0

package/src/icons/icons.module.css

@@ -1,7 +1,6 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-
   .element-root {
     width: 1.375rem;
     height: 1.375rem;
@@ -160,4 +159,4 @@
   .fill-danger:is(:global(.dark) *) {
     fill: var(--red-400);
   }
-}
+}

package/src/icons/index.ts

@@ -1,39 +1,39 @@
+export * from './activity-icon.js'
+export * from './calendar-icon.js'
+export * from './check-icon.js'
+export * from './close-icon.js'
+export * from './copy-icon.js'
 export * from './danger-icon.js'
+export * from './dashboard-icon.js'
+export * from './delete-icon.js'
+export * from './document-icon.js'
+export * from './edit-icon.js'
+export * from './ellipsis-icon.js'
+export * from './email-icon.js'
+export * from './github-icon.js'
+export * from './globe-icon.js'
+export * from './google-icon.js'
+export * from './gripper-vertical-icon.js'
+export * from './home-icon.js'
 export * from './icon-element.js'
 export * from './info-icon.js'
+export * from './infonomic-icon.js'
 export * from './light-icon.js'
+export * from './location-pin-icon.js'
 export * from './moon-icon.js'
+export * from './plus-icon.js'
+export * from './refresh-icon.js'
 export * from './return-icon.js'
-export * from './success-icon.js'
-export * from './warning-icon.js'
-export * from './wallet-icon.js'
-export * from './globe-icon.js'
-export * from './close-icon.js'
+export * from './roles-icon.js'
 export * from './search-icon.js'
 export * from './search-menu-icon.js'
-export * from './refresh-icon.js'
-export * from './copy-icon.js'
-export * from './check-icon.js'
-export * from './x-icon.js'
-export * from './calendar-icon.js'
-export * from './location-pin-icon.js'
-export * from './settings-sliders-icon.js'
 export * from './settings-gear-icon.js'
-export * from './infonomic-icon.js'
-export * from './document-icon.js'
-export * from './edit-icon.js'
+export * from './settings-sliders-icon.js'
 export * from './sign-out-icon.js'
-export * from './gripper-vertical-icon.js'
-export * from './plus-icon.js'
+export * from './stopwatch-icon.js'
+export * from './success-icon.js'
 export * from './user-icon.js'
 export * from './users-icon.js'
-export * from './roles-icon.js'
-export * from './home-icon.js'
-export * from './ellipsis-icon.js'
-export * from './email-icon.js'
-export * from './delete-icon.js'
-export * from './activity-icon.js'
-export * from './github-icon.js'
-export * from './google-icon.js'
-export * from './dashboard-icon.js'
-export * from './stopwatch-icon.js'
+export * from './wallet-icon.js'
+export * from './warning-icon.js'
+export * from './x-icon.js'

package/src/icons/info-icon.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.js'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/infonomic-icon.tsx

@@ -3,7 +3,6 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
 import type { IconProps } from './types/icon.js'
 
 const svgStylesDefault = ''

package/src/icons/light-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const LightIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-current'], styles['stroke-none'], svgClassName)

package/src/icons/location-pin-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const LocationPinIcon = ({
   className,

package/src/icons/moon-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const MoonIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/plus-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const PlusIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/primary-icon.tsx

@@ -1,11 +1,11 @@
-import cx from 'classnames'
 import type React from 'react'
 
-import { IconElement } from './icon-element.jsx'
+import cx from 'classnames'
 
+import { IconElement } from './icon-element.jsx'
 import type { IconProps } from './types/icon.js'
 
-const svgStylesDefault = 'fill-gray-800 dark:fill-white'
+const _svgStylesDefault = 'fill-gray-800 dark:fill-white'
 
 import styles from './icons.module.css'
 

package/src/icons/refresh-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const RefreshIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/return-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const ReturnIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/roles-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const RolesIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/search-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const SearchIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-current'], styles['stroke-none'], svgClassName)

package/src/icons/search-menu-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const SearchMenuIcon = ({
   className,

package/src/icons/settings-gear-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const SettingsGearIcon = ({
   className,

package/src/icons/settings-sliders-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const SettingsSlidersIcon = ({
   className,

package/src/icons/sign-out-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const SignOutIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/stopwatch-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element'
-
-import type { IconProps } from './types/icon'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon'
 
 export const StopwatchIcon = ({
   className,

package/src/icons/success-icon.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.js'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/user-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const UserIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/users-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const UsersIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-none'], styles['stroke-current'], svgClassName)

package/src/icons/wallet-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const WalletIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-current'], svgClassName)

package/src/icons/warning-icon.tsx

@@ -1,6 +1,7 @@
-import cx from 'classnames'
 import type React from 'react'
 
+import cx from 'classnames'
+
 import { IconElement } from './icon-element.js'
 import styles from './icons.module.css'
 import type { IconProps } from './types/icon.js'

package/src/icons/x-icon.tsx

@@ -3,10 +3,8 @@ import type React from 'react'
 import cx from 'classnames'
 
 import { IconElement } from './icon-element.js'
-
-import type { IconProps } from './types/icon.js'
-
 import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
 
 export const XIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
   const applied = cx(styles['fill-gray'], svgClassName)

package/src/loaders/loaders.stories.tsx

@@ -1,8 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type React from 'react'
 
-import { LoaderRing } from './ring.js'
 import { LoaderEllipsis } from './ellipses.js'
+import { LoaderRing } from './ring.js'
 import { LoaderSpinner } from './spinner.js'
 
 interface LoaderProps {
@@ -35,12 +35,10 @@ export default {
 
 export const Default = (): React.JSX.Element => {
   return (
-    <>
-      <div className="mb-6">
-        <div className="max-w-[700px]">
-          <LoaderDemo />
-        </div>
+    <div className="mb-6">
+      <div className="max-w-[700px]">
+        <LoaderDemo />
       </div>
-    </>
+    </div>
   )
 }

package/src/react.ts

@@ -3,7 +3,6 @@
  * TS / dist output
  */
 export * from './components/@types/shared.js'
-
 export * from './components/accordion/accordion.js'
 export * from './components/animation/fade-in-lift.js'
 export * from './components/avatar/avatar.js'
@@ -14,10 +13,9 @@ export * from './components/button/control-buttons.js'
 export * from './components/button/copy-button.js'
 export * from './components/button/icon-button.js'
 export * from './components/card/card.js'
+export * from './components/chips/chip.js'
 export * from './components/container/container.js'
 export * from './components/dropdown/dropdown.js'
-export * from './components/chips/chip.js'
-export * from './components/hamburger/hamburger.js'
 export * from './components/forms/calendar.js'
 export * from './components/forms/checkbox.js'
 export * from './components/forms/checkbox-group.js'
@@ -31,6 +29,7 @@ export * from './components/forms/radio-group.js'
 export * from './components/forms/select.js'
 export * from './components/forms/text-area.js'
 export * from './components/forms/utils.js'
+export * from './components/hamburger/hamburger.js'
 export * from './components/notifications/alert.js'
 export * from './components/notifications/toast.js'
 export * from './components/pager/pagination.js'
@@ -90,13 +89,12 @@ export * from './icons/users-icon.js'
 export * from './icons/wallet-icon.js'
 export * from './icons/warning-icon.js'
 export * from './icons/x-icon.js'
-
 export * from './loaders/ellipses.js'
 export * from './loaders/ring.js'
 export * from './loaders/spinner.js'
+export * from './widgets/datepicker/datepicker.js'
 export * from './widgets/drawer/drawer.js'
 export * from './widgets/drawer/drawer-context.js'
 export * from './widgets/modal/modal.js'
 export * from './widgets/search/search.js'
 export * from './widgets/timeline/timeline.js'
-export * from './widgets/datepicker/datepicker.js'

package/src/styles/base/animations.css

@@ -1,5 +1,4 @@
 @layer infonomic-base {
-
   @keyframes enterFromRight {
     from {
       opacity: 0;
@@ -92,7 +91,6 @@
     }
   }
 
-
   @keyframes slideUpAndFade {
     from {
       opacity: 0;
@@ -140,4 +138,4 @@
       transform: translateX(0);
     }
   }
-}
+}

package/src/styles/base/base.css

@@ -11,4 +11,3 @@
 @import "./transitions.css";
 @import "./typography.css";
 @import "./z-index.css";
-

package/src/styles/base/borders.css

@@ -27,4 +27,4 @@
     --ring-inset: ;
     --ring-shadow: 0 0 #0000;
   }
-}
+}

package/src/styles/base/breakpoints.css

@@ -8,8 +8,8 @@
     --breakpoint-sm: 40rem; /* 640px */
     --breakpoint-md: 48rem; /* 768px */
     --breakpoint-lg: 66rem; /* 1056px */
-      /* our container component will set max width to common screen size */
+    /* our container component will set max width to common screen size */
     --breakpoint-xl: 77rem; /* 1232px */
     --breakpoint-2xl: 94rem; /* 1504px */
   }
-}
+}

package/src/styles/base/colors.css

@@ -160,4 +160,4 @@
     --yellow-900: oklch(from var(--yellow-base) calc(l * 0.75) c h);
     --yellow-950: oklch(from var(--yellow-base) calc(l * 0.7) c h);
   }
-}
+}

package/src/styles/base/opacity.css

@@ -1,5 +1,5 @@
 @layer infonomic-base {
-:root {
+  :root {
     /* ========================================
         OPACITY LEVELS
     ======================================== */
@@ -9,4 +9,4 @@
     --opacity-75: 0.75;
     --opacity-100: 1;
   }
-}
+}

package/src/styles/base/reset.css

@@ -50,7 +50,8 @@
     -o-tab-size: 4;
     tab-size: 4;
     /* 3 */
-    font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    font-family:
+      Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
       "Segoe UI Symbol", "Noto Color Emoji";
     /* 4 */
     font-feature-settings: normal;
@@ -140,8 +141,9 @@ Add the correct font weight in Edge and Safari.
   kbd,
   samp,
   pre {
-    font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
+    font-family:
+      "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
     /* 1 */
     font-feature-settings: normal;
     /* 2 */
@@ -455,10 +457,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     *,
     *::before,
     *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
+      animation-duration: 0.01ms;
+      animation-iteration-count: 1;
+      transition-duration: 0.01ms;
+      scroll-behavior: auto;
     }
   }
 }

package/src/styles/base/shadows.css

@@ -10,4 +10,4 @@
     --shadow-lg: 0px 6px 12px rgba(0, 0, 0, 0.15);
     --shadow-xl: 0px 8px 16px rgba(0, 0, 0, 0.2);
   }
-}
+}

package/src/styles/base/size.css

@@ -1,24 +1,24 @@
 @layer infonomic-base {
   :root {
-  --size-0: 0;
-  --size-2: 0.125rem;
-  --size-4: 0.25rem;
-  --size-6: 0.375rem;
-  --size-8: 0.5rem;
-  --size-12: 0.75rem;
-  --size-16: 1rem;
-  --size-20: 1.25rem;
-  --size-24: 1.5rem;
-  --size-28: 1.75rem;
-  --size-32: 2rem;
-  --size-36: 2.25rem;
-  --size-40: 2.5rem;
-  --size-44: 2.75rem;
-  --size-48: 3rem;
-  --size-64: 4rem;
-  --size-80: 5rem;
-  --size-96: 6rem;
-  --size-112: 7rem;
-  --size-128: 8rem;
+    --size-0: 0;
+    --size-2: 0.125rem;
+    --size-4: 0.25rem;
+    --size-6: 0.375rem;
+    --size-8: 0.5rem;
+    --size-12: 0.75rem;
+    --size-16: 1rem;
+    --size-20: 1.25rem;
+    --size-24: 1.5rem;
+    --size-28: 1.75rem;
+    --size-32: 2rem;
+    --size-36: 2.25rem;
+    --size-40: 2.5rem;
+    --size-44: 2.75rem;
+    --size-48: 3rem;
+    --size-64: 4rem;
+    --size-80: 5rem;
+    --size-96: 6rem;
+    --size-112: 7rem;
+    --size-128: 8rem;
   }
-}
+}

package/src/styles/base/spacing.css

@@ -1,24 +1,24 @@
 @layer infonomic-base {
   :root {
-  --spacing-0: 0;
-  --spacing-2: 0.125rem;
-  --spacing-4: 0.25rem;
-  --spacing-6: 0.375rem;
-  --spacing-8: 0.5rem;
-  --spacing-12: 0.75rem;
-  --spacing-16: 1rem;
-  --spacing-20: 1.25rem;
-  --spacing-24: 1.5rem;
-  --spacing-28: 1.75rem;
-  --spacing-32: 2rem;
-  --spacing-36: 2.25rem;
-  --spacing-40: 2.5rem;
-  --spacing-44: 2.75rem;
-  --spacing-48: 3rem;
-  --spacing-64: 4rem;
-  --spacing-80: 5rem;
-  --spacing-96: 6rem;
-  --spacing-112: 7rem;
-  --spacing-128: 8rem;
+    --spacing-0: 0;
+    --spacing-2: 0.125rem;
+    --spacing-4: 0.25rem;
+    --spacing-6: 0.375rem;
+    --spacing-8: 0.5rem;
+    --spacing-12: 0.75rem;
+    --spacing-16: 1rem;
+    --spacing-20: 1.25rem;
+    --spacing-24: 1.5rem;
+    --spacing-28: 1.75rem;
+    --spacing-32: 2rem;
+    --spacing-36: 2.25rem;
+    --spacing-40: 2.5rem;
+    --spacing-44: 2.75rem;
+    --spacing-48: 3rem;
+    --spacing-64: 4rem;
+    --spacing-80: 5rem;
+    --spacing-96: 6rem;
+    --spacing-112: 7rem;
+    --spacing-128: 8rem;
   }
-}
+}

package/src/styles/base/transitions.css

@@ -4,4 +4,4 @@
     --transition-normal: 230ms ease-in-out;
     --transition-slow: 400ms ease-in-out;
   }
-}
+}

package/src/styles/base/typography.css

@@ -25,7 +25,6 @@
     /* 60px */
     --font-size-8xl: 3.75rem;
 
-
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
@@ -44,4 +43,4 @@
     --letter-spacing-normal: 0;
     --letter-spacing-wide: 0.05em;
   }
-}
+}