@sats-group/ui-lib 79.0.1 → 79.2.0

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "79.0.1",
+  "version": "79.2.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/confirmation/confirmation.tsx

@@ -20,6 +20,7 @@ const Confirmation: React.FC<React.PropsWithChildren<Props>> = ({
   text,
   title,
   ariaLabel,
+  actionButtonType = 'primary',
 }) => {
   useEscape(onClose);
 
@@ -53,7 +54,11 @@ const Confirmation: React.FC<React.PropsWithChildren<Props>> = ({
               {confirmationButton ? (
                 <Button
                   className="confirmation__button"
-                  variant={Button.variants.primary}
+                  variant={
+                    actionButtonType === 'primary'
+                      ? Button.variants.primary
+                      : Button.variants.primaryDestructive
+                  }
                   {...confirmationButton}
                   onClick={onConfirm}
                 />

package/react/confirmation/confirmation.types.ts

@@ -7,6 +7,7 @@ type ConfirmationBase = {
   title?: string;
   text?: string;
   ariaLabel: string;
+  actionButtonType?: 'primary' | 'destructive';
 };
 
 type ConfirmationRedirect = ConfirmationBase & {

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

@@ -15,6 +15,7 @@
 
   &--label-position-stacked {
     flex-direction: column;
+    gap: spacing.$xxs;
   }
 
   // NOTE: Specificity hack
@@ -54,7 +55,7 @@
     position: relative;
     width: 100%;
     border-radius: corner-radius.$s;
-    padding-right: spacing.$l;
+    padding-right: 36px; // NOTE: custom spacing to offset chevron overlap
 
     &--variant-small {
       padding-top: spacing.$xs;

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';
 

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-area/text-area.scss

@@ -41,7 +41,7 @@
   &__input {
     width: 100%;
     border: 0.5px solid light.$ge-border-default;
-    border-radius: corner-radius.$xs;
+    border-radius: corner-radius.$s;
 
     font-family: font-names.$brand, sans-serif;
     font-size: 16px;

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>(
   (

package/react/toggle/toggle.tsx

@@ -1,7 +1,9 @@
 import cn from 'classnames';
 import * as React from 'react';
 
+import Text from '../text';
 import useInputValidation from '../use-input-validation';
+
 import { Toggle as Props } from './toggle.types';
 
 const Toggle = React.forwardRef<
@@ -38,7 +40,7 @@ const Toggle = React.forwardRef<
         >
           {isLabelVisible && labelPosition === 'left' && (
             <div className="toggle__label">
-              {label}
+              <Text>{label}</Text>
               {children}
             </div>
           )}
@@ -70,7 +72,7 @@ const Toggle = React.forwardRef<
 
           {isLabelVisible && labelPosition === 'right' && (
             <div className="toggle__label">
-              {label}
+              <Text>{label}</Text>
               {children}
             </div>
           )}