@sats-group/ui-lib 79.1.0 → 80.0.0

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "79.1.0",
+  "version": "80.0.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",
     "npm": "^8 || ^9 || ^10"
   },
   "scripts": {
-    "build": "run-s clean logos typecheck colour components",
+    "build": "run-s clean logos typecheck colour components style-imports",
     "clean": "node rimraf.mjs",
     "colour": "node codegen/colours.mjs",
     "components": "node codegen/components.mjs",
+    "style-imports": "node codegen/style-imports.mjs",
     "dev": "npm run dev --workspace=site",
     "lint": "eslint",
     "lint:ci": "eslint --max-warnings 0",
@@ -24,7 +25,6 @@
   "author": "developer@sats.no",
   "license": "UNLICENSED",
   "peerDependencies": {
-    "@sats-group/icons": "^10.0.0",
     "classnames": "^2.5.1",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"

package/react/banner/banner.tsx

@@ -1,13 +1,13 @@
-import Close from '@sats-group/icons/18/close';
-import Confirm from '@sats-group/icons/18/confirm';
-import Error from '@sats-group/icons/18/error';
-import Info from '@sats-group/icons/18/info';
-import WarningSign from '@sats-group/icons/18/warning-sign';
 import cn from 'classnames';
 import React, { useState } from 'react';
 
 import Text from '../text';
 import VisuallyHidden from '../visually-hidden';
+import Error from '../icons/18/error';
+import Info from '../icons/18/info';
+import Confirm from '../icons/18/confirm';
+import WarningSign from '../icons/18/warning-sign';
+import Close from '../icons/18/close';
 
 import type { Banner as Props } from './banner.types';
 

package/react/icons/16/add.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+const SvgAdd = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 16, height: 16, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M8 2.833a.5.5 0 0 1 .5.5V7.5h4.167a.5.5 0 0 1 0 1H8.5v4.167a.5.5 0 0 1-1 0V8.5H3.333a.5.5 0 0 1 0-1H7.5V3.333a.5.5 0 0 1 .5-.5',
+      clipRule: 'evenodd',
+    }),
+  );
+export default SvgAdd;

package/react/icons/16/error.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+const SvgError = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 16, height: 16, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M4.885.98A.5.5 0 0 1 5.24.833h5.522a.5.5 0 0 1 .354.147l3.905 3.905a.5.5 0 0 1 .147.354v5.522a.5.5 0 0 1-.147.354l-3.905 3.905a.5.5 0 0 1-.354.147H5.24a.5.5 0 0 1-.354-.147L.98 11.115a.5.5 0 0 1-.147-.354V5.24a.5.5 0 0 1 .147-.354zm.561.853L1.834 5.447v5.108l3.612 3.613h5.108l3.613-3.613V5.446l-3.613-3.612z',
+      clipRule: 'evenodd',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M8.007 4.5c.507.005.9.444.848.948l-.33 3.16a.528.528 0 0 1-1.05 0l-.328-3.16a.86.86 0 0 1 .86-.947',
+      clipRule: 'evenodd',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      d: 'M8 11.637a.606.606 0 1 0 0-1.213.606.606 0 0 0 0 1.213',
+    }),
+  );
+export default SvgError;

package/react/icons/16/fistbump.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+const SvgFistbump = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 16, height: 16, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M2.29 2.934a2.7 2.7 0 0 1 1.892-.767h7.636c.708 0 1.389.274 1.893.767A2.6 2.6 0 0 1 14.5 4.8v6.933c0 .561-.228 1.096-.63 1.49a2.15 2.15 0 0 1-1.506.61H9.09a2.7 2.7 0 0 1-1.892-.767 2.6 2.6 0 0 1-.79-1.866v-.047a1.88 1.88 0 0 1-1.21-.654 2.15 2.15 0 0 1-1.563.668 2.16 2.16 0 0 1-1.506-.611 2.08 2.08 0 0 1-.63-1.49V4.8c0-.702.285-1.373.79-1.866m3.483 6.141v.258c0 .218.088.428.249.586a.88.88 0 0 0 .948.183.9.9 0 0 0 .281-.183.83.83 0 0 0 .249-.586v-2.32a.5.5 0 0 1 1 0v2.32c0 .218.088.428.249.586a.88.88 0 0 0 .615.248.88.88 0 0 0 .614-.248.82.82 0 0 0 .25-.586v-2.4a.5.5 0 1 1 1 0v2.134c0 .288.116.566.328.774.212.207.503.326.808.326s.595-.119.807-.326.329-.486.329-.774V4.8c0-.43-.174-.844-.489-1.151a1.7 1.7 0 0 0-1.193-.482H4.182c-.45 0-.879.174-1.193.482A1.6 1.6 0 0 0 2.5 4.8v4.267c0 .288.117.566.329.774.212.207.502.326.807.326s.596-.119.808-.326c.21-.206.327-.483.329-.769V6.933a.5.5 0 1 1 1 0v2.142m7.727 1.77a2.164 2.164 0 0 1-2.698-.346q-.059.07-.125.135a1.88 1.88 0 0 1-1.313.533A1.88 1.88 0 0 1 8 10.583a1.9 1.9 0 0 1-.59.419v.198c0 .43.173.844.488 1.151.314.308.743.482 1.193.482h3.273c.305 0 .595-.118.807-.326.212-.207.329-.486.329-.774z',
+      clipRule: 'evenodd',
+    }),
+  );
+export default SvgFistbump;

package/react/icons/16/info.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+const SvgInfo = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 16, height: 16, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M1.926 8a6.074 6.074 0 1 0 12.148 0A6.074 6.074 0 0 0 1.926 8M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1',
+      clipRule: 'evenodd',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      d: 'M8.523 11.038v-3.61a.588.588 0 1 0-1.176 0v3.61a.588.588 0 0 0 1.176 0M7.935 5.854a.74.74 0 1 0 0-1.48.74.74 0 0 0 0 1.48',
+    }),
+  );
+export default SvgInfo;

package/react/icons/16/send.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+const SvgSend = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 16, height: 16, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M13.834 2.107c.13.108.19.279.157.445L11.776 13.63a.46.46 0 0 1-.73.279L7.37 11.15l-1.784 2.13a.462.462 0 0 1-.816-.295V9.2L2.185 7.262a.462.462 0 0 1 .105-.798l11.077-4.431a.46.46 0 0 1 .467.074M5.692 9.892v1.822l.937-1.119zm.382-.868 6.763-5.41-1.823 9.116zm4.744-4.977L5.311 8.452 3.395 7.016z',
+      clipRule: 'evenodd',
+    }),
+  );
+export default SvgSend;

package/react/icons/18/arrow-down.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+const SvgArrowDown = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 18, height: 18, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M4.826 6.7a.6.6 0 0 1 .848 0L9 10.028 12.326 6.7a.6.6 0 1 1 .848.848l-3.75 3.75a.6.6 0 0 1-.848 0l-3.75-3.75a.6.6 0 0 1 0-.848',
+      clipRule: 'evenodd',
+    }),
+  );
+export default SvgArrowDown;

package/react/icons/18/confirm.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+const SvgConfirm = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 18, height: 18, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M12.712 6.682a.525.525 0 0 1 0 .743L7.886 12.25 5.288 9.652a.525.525 0 0 1 .742-.742l1.856 1.856 4.084-4.084a.525.525 0 0 1 .742 0',
+      clipRule: 'evenodd',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M2.926 9a6.074 6.074 0 1 0 12.148 0A6.074 6.074 0 0 0 2.926 9M9 2a7 7 0 1 0 0 14A7 7 0 0 0 9 2',
+      clipRule: 'evenodd',
+    }),
+  );
+export default SvgConfirm;

package/react/icons/18/error.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+const SvgError = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 18, height: 18, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M5.496 1.102a.56.56 0 0 1 .398-.165h6.212c.15 0 .293.06.398.165l4.394 4.394a.56.56 0 0 1 .165.398v6.212c0 .15-.06.293-.165.398l-4.394 4.394a.56.56 0 0 1-.398.165H5.894a.56.56 0 0 1-.398-.165l-4.394-4.394a.56.56 0 0 1-.165-.398V5.894c0-.15.06-.293.165-.398zm.63.96L2.063 6.128v5.746l4.065 4.065h5.746l4.065-4.065V6.127l-4.065-4.064z',
+      clipRule: 'evenodd',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M9.008 5.063a.966.966 0 0 1 .953 1.066l-.37 3.556a.594.594 0 0 1-1.182 0L8.04 6.129a.966.966 0 0 1 .968-1.066',
+      clipRule: 'evenodd',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      d: 'M9 13.09a.682.682 0 1 0 0-1.363.682.682 0 0 0 0 1.364',
+    }),
+  );
+export default SvgError;

package/react/icons/18/info.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+const SvgInfo = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 18, height: 18, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M2.059 9A6.941 6.941 0 1 0 15.94 9 6.941 6.941 0 0 0 2.06 9M9 1a8 8 0 1 0 0 16A8 8 0 0 0 9 1',
+      clipRule: 'evenodd',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      d: 'M9.598 12.472V8.347a.672.672 0 0 0-1.344 0v4.125a.672.672 0 0 0 1.344 0M8.926 6.547a.846.846 0 1 0 0-1.691.846.846 0 0 0 0 1.691',
+    }),
+  );
+export default SvgInfo;

package/react/icons/18/warning-sign.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+const SvgWarningSign = () =>
+  /* @__PURE__ */ React.createElement(
+    'svg',
+    { width: 18, height: 18, fill: 'none' },
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      d: 'M9.002 13.896c.377 0 .682-.32.682-.714 0-.395-.305-.715-.682-.715s-.682.32-.682.715.305.714.682.714',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M9.247 6.565a.75.75 0 0 1 .74.828l-.394 3.792a.594.594 0 0 1-1.182 0l-.394-3.796a.75.75 0 0 1 .752-.827z',
+      clipRule: 'evenodd',
+    }),
+    /* @__PURE__ */ React.createElement('path', {
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      d: 'M15.513 17.041c.263.002.522-.068.75-.202.23-.134.422-.328.559-.563a1.65 1.65 0 0 0 .046-1.568L10.355 1.812a1.6 1.6 0 0 0-.564-.623 1.48 1.48 0 0 0-1.578 0c-.239.15-.434.366-.564.623L1.136 14.708a1.65 1.65 0 0 0 .045 1.567c.137.235.328.429.557.563s.487.204.75.203zM2.141 15.213a.53.53 0 0 0 .014.498.43.43 0 0 0 .152.157.34.34 0 0 0 .175.048h13.039a.34.34 0 0 0 .175-.048.43.43 0 0 0 .153-.157.52.52 0 0 0 .014-.497v-.001L9.35 2.319a.45.45 0 0 0-.159-.179.35.35 0 0 0-.189-.056.35.35 0 0 0-.19.056.45.45 0 0 0-.158.18z',
+      clipRule: 'evenodd',
+    }),
+  );
+export default SvgWarningSign;

package/react/message-field/message-field.tsx

@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import { MessageField as Props, variants, sizes } from './message-field.types';
 import Button from '../button';
 import TextArea from '../text-area';
-import Send from '@sats-group/icons/16/send';
-import Add from '@sats-group/icons/16/add';
+import Add from '../icons/16/add';
+import Send from '../icons/16/send';
 import classNames from 'classnames';
 
 const MessageField: React.FunctionComponent<Props> & {

package/react/select/select.scss

@@ -4,18 +4,20 @@
 @use '../../tokens/font-sizes';
 
 .select {
-  display: flex;
-
-  &--label-position-inline {
-    flex-direction: row;
-    gap: spacing.$xs;
-    align-items: center;
-    flex-wrap: wrap;
-  }
+  &__content {
+    &--position-inline {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: spacing.$xs;
+      flex-wrap: wrap;
+    }
 
-  &--label-position-stacked {
-    flex-direction: column;
-    gap: spacing.$xxs;
+    &--position-stacked {
+      display: grid;
+      gap: spacing.$xxs;
+      justify-items: start;
+    }
   }
 
   // NOTE: Specificity hack
@@ -53,7 +55,6 @@
     border: 1px solid light.$ge-border-default;
     display: block;
     position: relative;
-    width: 100%;
     border-radius: corner-radius.$s;
     padding-right: 36px; // NOTE: custom spacing to offset chevron overlap
 
@@ -109,7 +110,7 @@
     margin-left: spacing.$xs;
   }
 
-  &__label {
+  &__label-text {
     display: flex;
     flex-direction: row;
   }

package/react/select/select.tsx

@@ -5,7 +5,7 @@ import useInputValidation from '../use-input-validation';
 
 import Option from '../select-option/select-option';
 import Text from '../text';
-import SvgArrowDown from '@sats-group/icons/18/arrow-down';
+import SvgArrowDown from '../icons/18/arrow-down';
 
 import { labelPositions, Select as Props, variants } from './select.types';
 
@@ -18,6 +18,7 @@ const RefSelect = React.forwardRef<
     {
       children,
       className,
+      id,
       isLabelVisible = true,
       label,
       labelPosition = labelPositions.stacked,
@@ -39,66 +40,71 @@ const RefSelect = React.forwardRef<
       validationOnChange(e);
     };
 
+    const asterix = required ? (
+      <span className="select__asterisk">*</span>
+    ) : null;
+
     return (
-      <label
-        className={cn('select', className, {
-          'select--error': error,
-          [`select--label-position-${labelPosition}`]: labelPosition
-            ? labelPositions[labelPosition]
-            : undefined,
-        })}
-      >
-        {isLabelVisible && (label || children) ? (
-          <div className="select__label">
-            <Text
-              size={
-                variant === variants.small ? Text.sizes.small : Text.sizes.basic
-              }
-              theme={Text.themes.emphasis}
+      <div className={cn('select', className, { 'select--error': error })}>
+        <div
+          className={`select__content select__content--position-${labelPosition}`}
+        >
+          {isLabelVisible ? (
+            <label className="select__label" htmlFor={id}>
+              {label || children ? (
+                <div className="select__label-text">
+                  <Text
+                    size={
+                      variant === variants.small
+                        ? Text.sizes.small
+                        : Text.sizes.basic
+                    }
+                    theme={Text.themes.emphasis}
+                  >
+                    {label}
+                  </Text>
+                  {asterix}
+                  {children}
+                </div>
+              ) : required ? (
+                asterix
+              ) : null}
+            </label>
+          ) : null}
+
+          <div className="select__native-wrapper">
+            <select
+              aria-label={isLabelVisible ? undefined : label}
+              className={`select__select select__select--variant-${variant}`}
+              id={id}
+              name={name}
+              onChange={onInputChange}
+              onInvalid={e => {
+                // NOTE: To not break compatibility
+                if (restProps.onInvalid) restProps.onInvalid(e);
+                onInvalid(e);
+              }}
+              ref={ref}
+              required={required}
+              {...restProps}
             >
-              {label}
-            </Text>
-            {required ? <span className="select__asterisk">*</span> : null}
-            {children}
+              {options.map(option => (
+                <Option key={option.value} {...option} />
+              ))}
+            </select>
+            <span className="select__chevron">
+              <SvgArrowDown />
+            </span>
           </div>
-        ) : required ? (
-          <span className="select__asterisk">*</span>
-        ) : null}
 
-        <div className="select__native-wrapper">
-          <select
-            className={cn('select__select', {
-              'select__select--variant-small': variant === variants.small,
-              'select__select--variant-large': variant === variants.large,
-            })}
-            name={name}
-            ref={ref}
-            onChange={onInputChange}
-            required={required}
-            onInvalid={e => {
-              // NOTE: To not break compatibility
-              if (restProps.onInvalid) restProps.onInvalid(e);
-              onInvalid(e);
-            }}
-            aria-label={isLabelVisible ? undefined : label}
-            {...restProps}
-          >
-            {options.map(option => (
-              <Option key={option.value} {...option} />
-            ))}
-          </select>
-          <span className="select__chevron">
-            <SvgArrowDown />
-          </span>
+          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
+          {error ? (
+            <div aria-hidden="true" className="select__error">
+              {error}
+            </div>
+          ) : null}
         </div>
-
-        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-        {error && (
-          <div aria-hidden="true" className="select__error">
-            {error}
-          </div>
-        )}
-      </label>
+      </div>
     );
   },
 );
@@ -114,7 +120,8 @@ const SelectComponent = RefSelect as <OptionExtra>(
 ) => React.ReactElement;
 
 const Select: typeof SelectComponent & {
+  labelPositions: typeof labelPositions;
   variants: typeof variants;
-} = Object.assign(SelectComponent, { variants });
+} = Object.assign(SelectComponent, { labelPositions, variants });
 
 export default Select;

package/react/select/select.types.ts

@@ -10,10 +10,11 @@ export const labelPositions = {
 export const variants = {
   small: 'small',
   large: 'large',
-};
+} as const;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Select<OptionExtra = any> = {
+  id: string;
   isLabelVisible?: boolean;
   label?: string;
   labelPosition?: ObjectValues<typeof labelPositions>;

package/react/style.scss

@@ -0,0 +1,33 @@
+@use "./badge/badge.scss";
+@use "./banner/banner.scss";
+@use "./bomb/bomb.scss";
+@use "./checkbox/checkbox.scss";
+@use "./chip/chip.scss";
+@use "./chip-selected/chip-selected.scss";
+@use "./confirmation/confirmation.scss";
+@use "./context-menu/context-menu.scss";
+@use "./cropped-image/cropped-image.scss";
+@use "./dropdown-list/dropdown-list.scss";
+@use "./expander/expander.scss";
+@use "./filter/filter.scss";
+@use "./filter-wrapper/filter-wrapper.scss";
+@use "./flag/flag.scss";
+@use "./form-content/form-content.scss";
+@use "./link/link.scss";
+@use "./link-card/link-card.scss";
+@use "./message/message.scss";
+@use "./message-field/message-field.scss";
+@use "./modal/modal.scss";
+@use "./progress-bar/progress-bar.scss";
+@use "./radio/radio.scss";
+@use "./scale-bar/scale-bar.scss";
+@use "./search/search.scss";
+@use "./select/select.scss";
+@use "./tag/tag.scss";
+@use "./text/text.scss";
+@use "./text-area/text-area.scss";
+@use "./text-input/text-input.scss";
+@use "./toggle/toggle.scss";
+@use "./toolbox/toolbox.scss";
+@use "./visually-button/visually-button.scss";
+@use "./visually-hidden/visually-hidden.scss";

package/react/text-input/text-input.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 
 import Text from '../text';
 import useInputValidation from '../use-input-validation';
+import SvgInfo from '../icons/16/info';
+import SvgError from '../icons/16/error';
 
 import { themes, variants, TextInput as Props } from './text-input.types';
 import { useEffect } from 'react';
-import SvgError from '@sats-group/icons/16/error';
-import SvgInfo from '@sats-group/icons/16/info';
 
 const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
   (