@equinor/amplify-component-lib 9.15.2-beta.0 → 9.15.3-beta.0

package/dist/molecules/DatePicker/DatePicker.styles.js

@@ -0,0 +1,63 @@
+import{VARIANT_COLORS as e,colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import r,{css as i}from"styled-components";const a=r.div`
+  position: relative;
+  height: fit-content;
+  > p {
+    color: ${t.text.static_icons__tertiary.rgba};
+    position: absolute;
+    top: 0;
+    right: 8px;
+  }
+  /* If the DatePicker doesn't have a label there won't be space for the meta text*/
+  &:not(:has(> div > label)):has(> p) {
+    padding-top: 1rem;
+  }
+
+  > div:hover:not(:disabled):not(:focus-within) {
+    ${({$variant:n})=>n===void 0?i`
+          > div[id*='react-aria'] {
+            box-shadow: inset 0 -2px 0 0
+              ${t.text.static_icons__tertiary.rgba};
+          }
+        `:i`
+        > div[id*='react-aria'] {
+          box-shadow: inset 0 -2px 0 0 ${e[n]};
+        }
+      `}
+  }
+
+  > div > div[id*='react-aria'] {
+    outline: none !important;
+
+    ${({$variant:n})=>n===void 0?i`
+          box-shadow: inset 0 -1px 0 0
+            ${t.text.static_icons__tertiary.rgba};
+          &:focus-within {
+            box-shadow: inset 0 -2px 0 0
+              ${t.interactive.primary__resting.rgba};
+          }
+        `:i`
+        box-shadow: inset 0 -${n===`dirty`?2:1}px 0 0
+          ${e[n]};
+        &:focus-within {
+          box-shadow: inset 0 -2px 0 0 ${e[n]};
+        }
+      `}
+  }
+
+  ${({$loading:e})=>{if(e)return i`
+        div[role='presentation'] {
+          visibility: hidden;
+
+          // For the date range picker there is a "-" in between the two dates, so we hide that as well
+          & ~ span {
+            visibility: hidden;
+          }
+        }
+      `}}
+
+  > svg {
+    position: absolute;
+    right: ${n.small};
+    transform: translateY(calc(${n.x_small} + ${n.xx_small}));
+  }
+`;export{a as DatePickerWrapper};

package/dist/molecules/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,17 @@
+import { Variants } from "../../atoms/types/variants.js";
+import * as react16 from "react";
+import { DateRangePickerProps } from "@equinor/eds-core-react";
+
+//#region src/molecules/DateRangePicker/DateRangePicker.d.ts
+type DateRangePickerProps$1 = Omit<DateRangePickerProps, 'variant'> & {
+  variant?: Variants;
+  meta?: string;
+  loading?: boolean;
+};
+declare const DateRangePicker$1: react16.ForwardRefExoticComponent<Omit<DateRangePickerProps, "variant"> & {
+  variant?: Variants;
+  meta?: string;
+  loading?: boolean;
+} & react16.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DateRangePicker$1 as DateRangePicker, DateRangePickerProps$1 as DateRangePickerProps };

package/dist/molecules/DateRangePicker/DateRangePicker.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{getSkeletonHeight as t,getSkeletonTop as n}from"../../atoms/utils/skeleton.js";import{DatePickerWrapper as r}from"../DatePicker/DatePicker.styles.js";import{SkeletonField as i}from"../Skeleton/SkeletonField.js";import{forwardRef as a,useRef as o}from"react";import{DateRangePicker as s,Icon as c,Typography as l}from"@equinor/eds-core-react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{calendar_date_range as f}from"@equinor/eds-icons";const p=a((a,p)=>{let m=a.locale??`en-GB`,h=a.formatOptions===void 0?{day:`2-digit`,month:`2-digit`,year:`numeric`}:a.formatOptions,g={...a,variant:a.variant===`dirty`?void 0:a.variant,loading:void 0},_=n(a),v=t({label:a.label,helperText:a.helperProps?.text,helperIcon:a.helperProps?.icon}),y=o(`${Math.max(40,Math.random()*80)}%`),b=a.disabled||a.loading;return d(r,{$variant:a.variant,$loading:a.loading,children:[u(s,{...g,ref:p,locale:m,formatOptions:h,disabled:b}),a.meta&&u(l,{variant:`helper`,group:`input`,children:a.meta}),a.loading&&u(i,{role:`progressbar`,style:{width:y.current,height:v,top:_}}),b&&u(c,{style:{top:_},data:f,size:24,color:e.interactive.disabled__fill.rgba})]})});p.displayName=`DateRangePicker`;export{p as DateRangePicker};

package/dist/molecules/Dialog/Dialog.d.ts

@@ -0,0 +1,56 @@
+import * as react14 from "react";
+import { ReactNode } from "react";
+import { ButtonProps, DialogProps } from "@equinor/eds-core-react";
+import { IconData } from "@equinor/eds-icons";
+
+//#region src/molecules/Dialog/Dialog.d.ts
+
+/**
+ * @param position - Right is default
+ * @param onClick - button on click
+ * @param text - button text
+ * @param variant - button variant
+ * @param icon - button icon, is placed to the left of the text
+ * @param disabled - if set to string, the button is disabled and gets a tooltip
+ */
+interface DialogAction {
+  position?: 'left' | 'center' | 'right';
+  onClick: () => void;
+  text: string;
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
+  icon?: IconData;
+  disabled?: boolean | string;
+  isLoading?: boolean;
+}
+interface DialogProps$1 extends Omit<DialogProps, 'title'> {
+  title: string | ReactNode | [ReactNode, ReactNode];
+  children: string | ReactNode | ReactNode[];
+  onClose: () => void;
+  width?: number | 'auto';
+  actions?: DialogAction[];
+  withContentPadding?: {
+    vertical?: boolean;
+    horizontal?: boolean;
+  };
+  withBorders?: boolean;
+  contentMaxHeight?: string;
+  hideClose?: boolean;
+  additionalInfo?: string | ReactNode;
+}
+/**
+ * @param title - String or up to 2 react elements in a flex-column
+ * @param children - Content in the dialog, if string it gets the default typography styling for dialogs
+ * @param onClose - fn to set open to false
+ * @param width - width in px, defaults to just fit-content
+ * @param actions - Dialog actions, { position: "right" is default }
+ * @param withContentPadding - Defaults to true for vertical and horizontal
+ * @param withBorders - Defaults to false
+ * @param contentMaxHeight - Defaults to '60vh'
+ * @param hideClose - Defaults to true. Hides the top right close button icon
+ * @param additionalInfo - Defaults to empty, and won't show the additional info button
+ * Also inherits props from EDS dialog
+ */
+declare const Dialog$1: react14.ForwardRefExoticComponent<DialogProps$1 & react14.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Dialog$1 as Dialog, DialogAction, DialogProps$1 as DialogProps };

package/dist/molecules/Dialog/Dialog.js

@@ -0,0 +1 @@
+import{AdditionalInfoBanner as e,DialogActions as t,DialogContent as n,DialogElement as r,DialogTitle as i,InfoIconWrapper as a}from"./Dialog.styles.js";import{DialogAction as o}from"./DialogAction.js";import{forwardRef as s,useState as c}from"react";import{Button as l,Icon as u,Typography as d}from"@equinor/eds-core-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{close as m,info_circle as h}from"@equinor/eds-icons";const g=s(({title:s,children:g,width:_,actions:v,withContentPadding:y,withBorders:b=!1,contentMaxHeight:x=`60vh`,hideClose:S,additionalInfo:C,...w},T)=>{let{horizontal:E=!0,vertical:D=!0}=y??{},[O,k]=c(!1),A=v?.filter(e=>e.position===`left`),j=v?.filter(e=>e.position===`center`),M=v?.filter(e=>e.position===void 0||e.position===`right`),N=typeof s==`string`?f(d,{variant:`h6`,children:s}):s,P=typeof g==`string`?f(d,{variant:`body_long`,children:g}):g;return p(r,{...w,ref:T,style:{width:_?typeof _==`string`?_:`${_}px`:void 0,...w.style},children:[p(i,{$withBorders:b,style:{width:_?`${_}px`:void 0},children:[f(`section`,{children:N}),p(`div`,{children:[C&&f(l,{variant:`ghost_icon`,onClick:()=>k(e=>!e),"data-testid":`dialog-info-button`,children:f(u,{data:h})}),!S&&f(l,{variant:`ghost_icon`,onClick:w.onClose,"data-testid":`dialog-close-button`,children:f(u,{data:m,"data-testid":`dialog-close-icon`,size:24})})]})]}),p(n,{$withContentPaddingX:E,$withContentPaddingY:D,style:{width:_?`${_}px`:void 0,maxHeight:x},children:[O&&C&&p(e,{children:[f(a,{children:f(u,{data:h,size:24})}),C]}),P]}),v&&v.length>0&&p(t,{$withBorders:b,style:{width:_?`${_}px`:void 0},children:[A&&A.length>0&&f(`section`,{id:`dialog-actions-left`,children:A.map(e=>f(o,{...e},e.text))}),j&&j.length>0&&f(`section`,{id:`dialog-actions-center`,children:j.map(e=>f(o,{...e},e.text))}),M&&M.length>0&&f(`section`,{id:`dialog-actions-right`,children:M.map(e=>f(o,{...e},e.text))})]})]})});g.displayName=`Dialog`;export{g as Dialog};

package/dist/molecules/Dialog/Dialog.styles.js

@@ -0,0 +1,64 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{Dialog as n}from"@equinor/eds-core-react";import r,{css as i}from"styled-components";const a=r(n)`
+  grid-gap: 0;
+`,o=r(n.Title)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: ${t.medium};
+
+  ${({$withBorders:t})=>t?i`
+        border-bottom: 1px solid ${e.ui.background__medium.rgba};
+      `:``}
+  > section {
+    display: flex;
+    flex-direction: column;
+  }
+`,s=r(n.CustomContent)`
+  min-height: unset;
+  overflow: auto;
+  ${({$withContentPaddingX:e,$withContentPaddingY:n})=>i`
+      padding: ${n?t.medium:0}
+        ${e?t.medium:0};
+    `}
+`,c=r(n.Actions)`
+  border-top: 1px solid ${e.ui.background__medium.rgba};
+  display: grid;
+  grid-template-columns: auto auto auto;
+  padding-top: ${t.medium};
+  width: 100%;
+
+  > section {
+    display: flex;
+    gap: ${t.small};
+  }
+
+  > section#dialog-actions-left {
+    grid-column: 1;
+  }
+
+  > section#dialog-actions-center {
+    grid-column: 2;
+    justify-content: center;
+  }
+
+  > section#dialog-actions-right {
+    grid-column: 3;
+    justify-content: flex-end;
+  }
+
+  ${({$withBorders:t})=>t?i`
+        border-top: 1px solid ${e.ui.background__medium.rgba};
+      `:i`
+      border-top: none;
+    `}
+`,l=r.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${t.medium};
+  padding: ${t.medium};
+  background-color: ${e.ui.background__info.rgba};
+`,u=r.div`
+  display: flex;
+  align-items: center;
+`;export{l as AdditionalInfoBanner,c as DialogActions,s as DialogContent,a as DialogElement,o as DialogTitle,u as InfoIconWrapper};

package/dist/molecules/Dialog/DialogAction.js

@@ -0,0 +1 @@
+import{Button as e}from"../Button/Button.js";import{OptionalTooltip as t}from"../OptionalTooltip/OptionalTooltip.js";import{Icon as n}from"@equinor/eds-core-react";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({text:a,variant:o,color:s,onClick:c,icon:l,disabled:u,isLoading:d=!1})=>r(t,{title:typeof u==`string`?u:``,children:i(e,{variant:o,color:s,onClick:c,disabled:u!==void 0&&!!u,loading:d,children:[l&&r(n,{data:l}),a]})});export{a as DialogAction};

package/dist/molecules/EquinorLogo/EquinorLogo.d.ts

@@ -0,0 +1,11 @@
+import { SizeIconProps } from "../../atoms/types/Icon.js";
+import * as react18 from "react";
+
+//#region src/molecules/EquinorLogo/EquinorLogo.d.ts
+interface EquinorLogoProps extends Partial<SizeIconProps> {
+  large?: boolean;
+  color?: 'red' | 'white' | 'black';
+}
+declare const EquinorLogo: react18.ForwardRefExoticComponent<EquinorLogoProps & react18.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { EquinorLogo, EquinorLogoProps };

package/dist/molecules/EquinorLogo/EquinorLogo.js

@@ -0,0 +1 @@
+import{colorSwitch as e}from"./EquinorLogo.utils.js";import{Fragment as t,forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({large:n,color:i,size:a},o)=>r(t,{children:n?r(`svg`,{width:a?a*2:48,height:a?a*2:48,viewBox:`0 0 75 30`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:o,"data-testid":`logo`,children:r(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M55.485 5.72054L55.4852 12.3731C55.485 12.5703 55.5839 12.7525 55.7547 12.8508L61.5192 16.1718C61.7637 16.3127 62.0756 16.1362 62.0758 15.8539V9.20147C62.076 9.00427 61.9708 8.8221 61.7999 8.72359L56.0356 5.40281C55.7909 5.26192 55.4854 5.4384 55.485 5.72054ZM73.2401 0.525845L64.9411 5.30705C64.6952 5.44867 64.5437 5.71082 64.5441 5.99462V15.5723C64.5444 15.9788 64.9933 16.2327 65.3454 16.0298L73.6446 11.2489C73.8904 11.1071 74.0326 10.845 74.0322 10.5612L74.0324 0.983548C74.032 0.577027 73.5923 0.323134 73.2401 0.525845ZM61.8556 20.8961L59.5493 22.225C59.4811 22.2644 59.4389 22.3373 59.4389 22.4162L59.4387 25.0776C59.4387 25.1908 59.5638 25.2613 59.6616 25.2049L61.9679 23.8762C62.0363 23.837 62.076 23.764 62.0758 23.6853V21.0234C62.0758 20.9106 61.9534 20.84 61.8556 20.8961ZM60.5115 18.4403L57.0576 16.4416C56.9552 16.3825 56.829 16.3825 56.7266 16.4416L53.2727 18.4403C53.1261 18.525 53.1261 18.7366 53.2727 18.8215L56.7266 20.8198C56.829 20.8792 56.9552 20.8792 57.0576 20.8198L60.5115 18.8215C60.6581 18.7366 60.6581 18.525 60.5115 18.4403ZM66.072 18.8006L67.6068 19.6885C67.6976 19.7411 67.8096 19.7411 67.9006 19.6885L69.4352 18.8006C69.5654 18.725 69.5654 18.537 69.4352 18.4616L67.9006 17.5737C67.8096 17.521 67.6976 17.521 67.6068 17.5737L66.072 18.4616C65.9418 18.537 65.9418 18.725 66.072 18.8006ZM64.8376 20.9376L66.3738 21.8225C66.4648 21.875 66.5209 21.9722 66.5209 22.0773L66.5191 23.8502C66.5189 24.0006 66.356 24.0947 66.2256 24.0197L64.6894 23.1347C64.5984 23.0823 64.5443 22.9847 64.5443 22.8799L64.5441 21.1071C64.5441 20.9568 64.7072 20.8624 64.8376 20.9376ZM49.212 19.1858C49.151 19.0332 49.0212 18.9776 48.8763 19.0638C48.7314 19.15 46.0076 20.773 46.0076 20.773V19.2774C46.0076 19.1095 45.9006 19.0484 45.7482 19.1095L44.863 19.43C44.741 19.4757 44.6952 19.5672 44.6952 19.6894V26.2647C44.6952 26.4021 44.7867 26.4935 44.9241 26.4935H45.7786C45.9158 26.4935 46.0076 26.4021 46.0076 26.2647V22.2373C46.0076 22.2373 49.2192 20.255 49.3494 20.1772C49.4795 20.0992 49.5461 20.0332 49.4867 19.8871C49.4217 19.727 49.212 19.1858 49.212 19.1858ZM1.90371 21.9614C2.19356 20.9086 3.01779 20.2676 4.17755 20.2676C5.44407 20.2676 6.11531 21.0153 6.1764 21.9614H1.90371ZM7.56528 22.3582C7.56528 20.527 6.3138 18.9857 4.22323 18.9857C2.1631 18.9857 0.454102 20.4661 0.454102 22.877C0.454102 25.0745 1.88848 26.6766 4.29954 26.6766C5.39821 26.6766 6.49707 26.2952 7.32111 25.5627C7.42788 25.4711 7.42788 25.3491 7.35157 25.2422L6.93954 24.6014C6.86323 24.4794 6.74123 24.4642 6.61924 24.5557C5.87132 25.105 5.10836 25.3796 4.29954 25.3796C2.75839 25.3796 1.91893 24.3724 1.81217 23.1059H7.33946C7.4809 23.1059 7.56528 23.0036 7.56528 22.8801V22.3582ZM12.379 25.3796C11.082 25.3796 9.9679 24.4946 9.9679 22.8159C9.9679 21.1373 11.082 20.2676 12.379 20.2676C13.737 20.2676 14.79 21.1373 14.79 22.8159C14.79 24.5099 13.737 25.3796 12.379 25.3796ZM15.0037 29.5455H15.8582C15.9955 29.5455 16.087 29.454 16.087 29.3166V19.2757C16.087 19.1079 15.9802 19.0468 15.8124 19.1079L14.9426 19.4285C14.8207 19.4742 14.7746 19.5657 14.7746 19.6879V20.0082C14.3017 19.3674 13.3707 18.9857 12.3637 18.9857C10.3645 18.9857 8.62506 20.4813 8.62506 22.8311C8.62506 24.9066 9.9679 26.6766 12.2874 26.6766C13.3402 26.6766 14.3474 26.2036 14.7746 25.6696V29.3166C14.7746 29.454 14.8663 29.5455 15.0037 29.5455ZM20.434 26.6766C21.2274 26.6766 22.0975 26.4172 22.662 25.5933V26.2647C22.662 26.4019 22.7535 26.4935 22.8909 26.4935H23.7454C23.8828 26.4935 23.9742 26.4019 23.9742 26.2647V19.2909C23.9742 19.1079 23.8674 19.0468 23.7148 19.1079L22.8298 19.4285C22.7078 19.4742 22.662 19.5657 22.662 19.6879V23.3501C22.662 24.6473 21.8227 25.3796 20.6782 25.3796C19.549 25.3796 18.7861 24.6625 18.7861 23.3501V19.2757C18.7861 19.1079 18.6791 19.0468 18.5267 19.1079L17.6417 19.4285C17.5194 19.4742 17.4735 19.5657 17.4735 19.6879V23.3958C17.4735 25.5627 18.7861 26.6766 20.434 26.6766ZM25.7595 18.3297L26.6905 18.0244C26.8429 17.9785 26.904 17.9022 26.904 17.7498V16.6359C26.904 16.4985 26.7972 16.3917 26.6294 16.4528L25.7136 16.7885C25.5764 16.8342 25.5001 16.8953 25.5001 17.0477V18.1159C25.5001 18.2838 25.5916 18.3906 25.7595 18.3297ZM25.7747 26.4935H26.6294C26.7666 26.4935 26.8583 26.4019 26.8583 26.2647V19.2757C26.8583 19.1079 26.7514 19.0468 26.5989 19.1079L25.7136 19.4285C25.5916 19.4742 25.5458 19.5657 25.5458 19.6879V26.2647C25.5458 26.4019 25.6373 26.4935 25.7747 26.4935ZM28.6585 26.4935H29.513C29.6504 26.4935 29.742 26.4019 29.742 26.2647V22.3123C29.742 21.0153 30.5814 20.2828 31.7258 20.2828C32.8549 20.2828 33.6178 21.0001 33.6178 22.3123V26.2647C33.6178 26.4019 33.7094 26.4935 33.8468 26.4935H34.7015C34.8387 26.4935 34.9304 26.4019 34.9304 26.2647V22.2666C34.9304 20.0998 33.6178 18.9857 31.9699 18.9857C31.1765 18.9857 30.3068 19.2451 29.742 20.0693V19.2757C29.742 19.1079 29.6352 19.0468 29.4826 19.1079L28.5974 19.4285C28.4754 19.4742 28.4298 19.5657 28.4298 19.6879V26.2647C28.4298 26.4019 28.5211 26.4935 28.6585 26.4935ZM39.8204 25.3948C38.3097 25.3948 37.3941 24.2657 37.3941 22.8311C37.3941 21.3967 38.3097 20.2676 39.8204 20.2676C41.3157 20.2676 42.2313 21.3967 42.2313 22.8311C42.2313 24.2657 41.3157 25.3948 39.8204 25.3948ZM39.8204 18.9857C37.6229 18.9857 36.0513 20.6185 36.0513 22.8311C36.0513 25.0439 37.6229 26.6766 39.8204 26.6766C42.0177 26.6766 43.5743 25.0439 43.5743 22.8311C43.5743 20.6185 42.0177 18.9857 39.8204 18.9857Z`,fill:e(i),"data-testid":`path`})}):r(`svg`,{width:a||24,height:a||24,viewBox:`0 0 42 48`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,ref:o,"data-testid":`logo`,children:r(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M5.33323 10.2045L5.33358 23.0959C5.33323 23.478 5.52484 23.831 5.85579 24.0216L17.0263 30.457C17.5002 30.73 18.1045 30.388 18.1049 29.8409V16.9499C18.1052 16.5677 17.9015 16.2147 17.5702 16.0238L6.40005 9.58875C5.92583 9.31573 5.33394 9.65771 5.33323 10.2045ZM39.7392 0.138079L23.6573 9.40318C23.1809 9.67762 22.8873 10.1856 22.888 10.7356V29.2953C22.8887 30.083 23.7586 30.575 24.4407 30.1819L40.5231 20.9175C40.9994 20.6427 41.2749 20.1347 41.2742 19.5847L41.2746 1.02502C41.2738 0.23726 40.4217 -0.254736 39.7392 0.138079ZM17.6783 39.6119L13.2091 42.1871C13.0768 42.2635 12.9951 42.4046 12.9951 42.5575L12.9947 47.7149C12.9947 47.9342 13.2372 48.0708 13.4266 47.9616L17.8958 45.3868C18.0284 45.3107 18.1052 45.1693 18.1049 45.0168V39.8586C18.1049 39.64 17.8678 39.5031 17.6783 39.6119ZM15.0736 34.853L8.38048 30.9799C8.18212 30.8655 7.93754 30.8655 7.73918 30.9799L1.04603 34.853C0.761999 35.0172 0.761999 35.4271 1.04603 35.5917L7.73918 39.464C7.93754 39.5792 8.18212 39.5792 8.38048 39.464L15.0736 35.5917C15.3577 35.4271 15.3577 35.0172 15.0736 34.853ZM25.8488 35.5512L28.8229 37.2717C28.9988 37.3737 29.216 37.3737 29.3923 37.2717L32.366 35.5512C32.6184 35.4047 32.6184 35.0403 32.366 34.8942L29.3923 33.1736C29.216 33.0716 28.9988 33.0716 28.8229 33.1736L25.8488 34.8942C25.5964 35.0403 25.5964 35.4047 25.8488 35.5512ZM23.4568 39.6922L26.4336 41.4071C26.6099 41.5088 26.7187 41.6972 26.7187 41.9009L26.7152 45.3363C26.7148 45.6278 26.3991 45.8102 26.1464 45.6648L23.1695 43.9499C22.9932 43.8483 22.8883 43.6591 22.8883 43.4562L22.888 40.0207C22.888 39.7296 23.204 39.5465 23.4568 39.6922Z`,fill:e(i),"data-testid":`path`})})}));i.displayName=`EquinorLogo`;export{i as EquinorLogo};

package/dist/molecules/EquinorLogo/EquinorLogo.utils.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";const t=t=>{switch(t){case`red`:return e.logo.fill_positive.rgba;case`white`:return e.logo.fill_negative.rgba;case`black`:return`#000`;default:return e.logo.fill_positive.rgba}};export{t as colorSwitch};

package/dist/molecules/FeedBackIcon/FeedBackIcon.d.ts

@@ -0,0 +1,11 @@
+import { SizeIconProps } from "../../atoms/types/Icon.js";
+import { FC } from "react";
+
+//#region src/molecules/FeedBackIcon/FeedBackIcon.d.ts
+interface FeedBackIconProps extends Partial<SizeIconProps> {
+  name: 'positive' | 'negative';
+  variant?: 'filled' | 'outlined';
+}
+declare const FeedBackIcon: FC<FeedBackIconProps>;
+//#endregion
+export { FeedBackIcon, FeedBackIconProps };

package/dist/molecules/FeedBackIcon/FeedBackIcon.js

@@ -0,0 +1 @@
+import{NegativeFilled as e}from"./NegativeFilled.js";import{NegativeOutlined as t}from"./NegativeOutlined.js";import{PositiveFilled as n}from"./PositiveFilled.js";import{PositiveOutlined as r}from"./PositiveOutlined.js";import{jsx as i}from"react/jsx-runtime";const a=[{iconName:`negative-outlined`,component:t},{iconName:`negative-filled`,component:e},{iconName:`positive-filled`,component:n},{iconName:`positive-outlined`,component:r}],o=({name:e,size:t=48,variant:n=`filled`})=>{let r=a.find(t=>t.iconName===`${e}-${n}`);return i(r.component,{size:t})};export{o as FeedBackIcon};

package/dist/molecules/FeedBackIcon/NegativeFilled.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const n=({size:n})=>t(`svg`,{width:n,height:n,viewBox:`0 0 48 48`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,"data-testid":`negative-filled`,children:[e(`rect`,{x:`0.5`,y:`0.5`,width:`47`,height:`47`,rx:`7.5`,fill:`#D5EAF4`}),e(`path`,{d:`M12 35.0466C12 33.4708 12.3104 31.9103 12.9134 30.4544C13.5165 28.9985 14.4004 27.6757 15.5147 26.5613C16.629 25.447 17.9519 24.5631 19.4078 23.9601C20.8637 23.357 22.4241 23.0466 24 23.0466C25.5759 23.0466 27.1363 23.357 28.5922 23.9601C30.0481 24.5631 31.371 25.447 32.4853 26.5614C33.5996 27.6757 34.4835 28.9985 35.0866 30.4544C35.6896 31.9103 36 33.4708 36 35.0466L32.4 35.0466C32.4 33.9435 32.1827 32.8512 31.7606 31.8321C31.3384 30.813 30.7197 29.8869 29.9397 29.1069C29.1597 28.3269 28.2337 27.7082 27.2145 27.286C26.1954 26.8639 25.1031 26.6466 24 26.6466C22.8969 26.6466 21.8046 26.8639 20.7855 27.286C19.7663 27.7082 18.8403 28.3269 18.0603 29.1069C17.2803 29.8869 16.6616 30.813 16.2394 31.8321C15.8173 32.8512 15.6 33.9435 15.6 35.0466L12 35.0466Z`,fill:`#007079`}),e(`circle`,{cx:`16`,cy:`15`,r:`3`,fill:`#007079`}),e(`circle`,{cx:`32`,cy:`15`,r:`3`,fill:`#007079`}),e(`rect`,{x:`0.5`,y:`0.5`,width:`47`,height:`47`,rx:`7.5`,stroke:`#007079`,strokeDasharray:`4 4`})]});export{n as NegativeFilled};

package/dist/molecules/FeedBackIcon/NegativeOutlined.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const n=({size:n})=>t(`svg`,{width:n,height:n,viewBox:`0 0 48 48`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,"data-testid":`negative-outlined`,children:[e(`path`,{d:`M12 35.0466C12 33.4708 12.3104 31.9103 12.9134 30.4544C13.5165 28.9985 14.4004 27.6757 15.5147 26.5613C16.629 25.447 17.9519 24.5631 19.4078 23.9601C20.8637 23.357 22.4241 23.0466 24 23.0466C25.5759 23.0466 27.1363 23.357 28.5922 23.9601C30.0481 24.5631 31.371 25.447 32.4853 26.5614C33.5996 27.6757 34.4835 28.9985 35.0866 30.4544C35.6896 31.9103 36 33.4708 36 35.0466L32.4 35.0466C32.4 33.9435 32.1827 32.8512 31.7606 31.8321C31.3384 30.813 30.7197 29.8869 29.9397 29.1069C29.1597 28.3269 28.2337 27.7082 27.2145 27.286C26.1954 26.8639 25.1031 26.6466 24 26.6466C22.8969 26.6466 21.8046 26.8639 20.7855 27.286C19.7663 27.7082 18.8403 28.3269 18.0603 29.1069C17.2803 29.8869 16.6616 30.813 16.2394 31.8321C15.8173 32.8512 15.6 33.9435 15.6 35.0466L12 35.0466Z`,fill:`#6F6F6F`}),e(`circle`,{cx:`16`,cy:`15`,r:`3`,fill:`#6F6F6F`}),e(`circle`,{cx:`32`,cy:`15`,r:`3`,fill:`#6F6F6F`}),e(`rect`,{x:`0.5`,y:`0.5`,width:`47`,height:`47`,rx:`7.5`,stroke:`#6F6F6F`,strokeDasharray:`4 4`})]});export{n as NegativeOutlined};

package/dist/molecules/FeedBackIcon/PositiveFilled.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const n=({size:n})=>t(`svg`,{width:n,height:n,viewBox:`0 0 48 48`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,"data-testid":`positive-filled`,children:[e(`rect`,{x:`0.5`,y:`0.5`,width:`47`,height:`47`,rx:`7.5`,fill:`#D5EAF4`}),e(`path`,{d:`M36 24C36 25.5759 35.6896 27.1363 35.0866 28.5922C34.4835 30.0481 33.5996 31.371 32.4853 32.4853C31.371 33.5996 30.0481 34.4835 28.5922 35.0866C27.1363 35.6896 25.5759 36 24 36C22.4241 36 20.8637 35.6896 19.4078 35.0866C17.9519 34.4835 16.629 33.5996 15.5147 32.4853C14.4004 31.371 13.5165 30.0481 12.9134 28.5922C12.3104 27.1363 12 25.5759 12 24L24 24L36 24Z`,fill:`#007079`}),e(`circle`,{cx:`16`,cy:`15`,r:`3`,fill:`#007079`}),e(`circle`,{cx:`32`,cy:`15`,r:`3`,fill:`#007079`}),e(`rect`,{x:`0.5`,y:`0.5`,width:`47`,height:`47`,rx:`7.5`,stroke:`#007079`,strokeDasharray:`4 4`})]});export{n as PositiveFilled};

package/dist/molecules/FeedBackIcon/PositiveOutlined.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const n=({size:n})=>t(`svg`,{width:n,height:n,viewBox:`0 0 48 48`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,"data-testid":`positive-outlined`,children:[e(`path`,{d:`M36 24C36 25.5759 35.6896 27.1363 35.0866 28.5922C34.4835 30.0481 33.5996 31.371 32.4853 32.4853C31.371 33.5996 30.0481 34.4835 28.5922 35.0866C27.1363 35.6896 25.5759 36 24 36C22.4241 36 20.8637 35.6896 19.4078 35.0866C17.9519 34.4835 16.629 33.5996 15.5147 32.4853C14.4004 31.371 13.5165 30.0481 12.9134 28.5922C12.3104 27.1363 12 25.5759 12 24L24 24L36 24Z`,fill:`#6F6F6F`}),e(`circle`,{cx:`16`,cy:`15`,r:`3`,fill:`#6F6F6F`}),e(`circle`,{cx:`32`,cy:`15`,r:`3`,fill:`#6F6F6F`}),e(`rect`,{x:`0.5`,y:`0.5`,width:`47`,height:`47`,rx:`7.5`,stroke:`#6F6F6F`,strokeDasharray:`4 4`})]});export{n as PositiveOutlined};

package/dist/molecules/FileProgress/CompactFileProgress.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{OptionalTooltip as t}from"../OptionalTooltip/OptionalTooltip.js";import{AdditionalText as n,CircularProgress as r,CloseButton as i,CompactFileProgressContainer as a,DoneWrapper as o,FileTooltip as s,LoadingWrapper as c,Rejection as l}from"./CompactFileProgress.styles.js";import{getFileIcon as u,isFileImage as d,readUploadedFileAsText as f}from"./FileProgress.utils.js";import{useEffect as p,useMemo as m,useState as h}from"react";import{Icon as g,Typography as _}from"@equinor/eds-core-react";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{clear as b,error_outlined as x}from"@equinor/eds-icons";const S=({file:S,isError:C,shortErrorText:w,showCompleteState:T,fullErrorText:E,handleOnClick:D,isDeleting:O,...k})=>{let[A,j]=h(``);p(()=>{let e=async e=>{let t=await f(e);j(t)};C||e(S)},[C,S]);let M=m(()=>C?E&&E.length>0?E:`An error has occurred with the file`:``,[E,C]),N=m(()=>C?y(l,{children:[v(g,{data:x,color:e.interactive.warning__text.rgba}),v(`div`,{children:w&&w.length>0?w:`Invalid file type`}),v(`svg`,{width:`88`,height:`88`,viewBox:`0 0 88 88`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:v(`rect`,{x:`1`,y:`1`,width:`86`,height:`86`,rx:`7`,stroke:e.interactive.warning__text.rgba,strokeWidth:`2`,strokeDasharray:`4 4`})})]}):T&&!O&&d(S.name)?v(o,{children:v(`img`,{src:A,alt:` ${S.name}`})}):T&&!O?v(o,{children:v(g,{data:u(S.name)})}):y(c,{children:[v(r,{variant:k.indeterminate||O?`indeterminate`:`determinate`,value:!k.isDone&&!k.indeterminate?k.progressPercent:void 0,size:24}),v(_,{variant:`meta`,children:`Uploading...`}),v(`svg`,{width:`88`,height:`88`,viewBox:`0 0 88 88`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:v(`rect`,{x:`1`,y:`1`,width:`86`,height:`86`,rx:`7`,stroke:e.ui.background__medium.rgba,strokeWidth:`2`,strokeDasharray:`4 4`})})]}),[C,T,O,w,A,S.name,k]);return y(a,{$isError:C,children:[v(s,{title:M,children:N}),v(t,{title:S.name,children:v(n,{group:`paragraph`,variant:`meta`,children:S.name})}),!O&&k.onDelete&&v(i,{"data-testid":`delete-file`,onClick:D,children:v(g,{color:e.text.static_icons__tertiary.rgba,data:b})})]})};export{S as default};

package/dist/molecules/FileProgress/CompactFileProgress.styles.js

@@ -0,0 +1,100 @@
+import{animation as e}from"../../atoms/style/animation.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import{CircularProgress as r,Tooltip as i,Typography as a}from"@equinor/eds-core-react";import o,{css as s}from"styled-components";const c=o.div`
+  margin: 10px 0;
+  width: 88px;
+  height: 88px;
+  box-sizing: border-box;
+  position: relative;
+  transition: ${e.transitionMS};
+  border-radius: ${`7px`};
+  ${({$isError:e})=>e&&s`
+      &:hover {
+        background: ${t.ui.background__warning.rgba};
+      }
+    `}
+`;o(a)`
+  margin: ${n.small} ${n.small} 0 ${n.small};
+  color: ${t.text.static_icons__tertiary.rgba};
+`;const l=o.div`
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: ${n.small};
+  justify-content: center;
+  align-items: center;
+  border-radius: ${`7px`};
+  > svg:last-child {
+    position: absolute;
+  }
+`,u=o.div`
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  border: 2px solid ${t.ui.background__medium.rgba};
+  border-radius: ${`7px`};
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > img {
+    object-fit: cover;
+    width: 88px;
+    height: 88px;
+  }
+
+  > svg {
+    width: 40px;
+    height: 40px;
+  }
+`,d=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${n.small};
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  font-size: 11px;
+  justify-items: center;
+  text-align: center;
+  border-radius: ${`7px`};
+  > svg:last-child {
+    position: absolute;
+  }
+  > div {
+    color: ${t.interactive.warning__text.rgba};
+  }
+`,f=o.div`
+  background-color: ${t.text.static_icons__tertiary.rgba};
+  border-radius: 50%;
+  border: 2px solid ${t.ui.background__light.rgba};
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  right: -10px;
+  cursor: pointer;
+  top: -10px;
+  > svg {
+    width: 14px;
+    height: 14px;
+    fill: ${t.ui.background__light.rgba};
+  }
+`,p=o(a)`
+  font-size: 10px;
+  padding-top: ${n.x_small};
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+`,m=o(i)`
+  white-space: pre;
+`,h=o(r)`
+  circle {
+    stroke: ${t.interactive.primary__resting.rgba};
+  }
+  circle:first-child {
+    stroke: ${t.interactive.primary__hover_alt.rgba};
+  }
+`;export{p as AdditionalText,h as CircularProgress,f as CloseButton,c as CompactFileProgressContainer,u as DoneWrapper,m as FileTooltip,l as LoadingWrapper,d as Rejection};

package/dist/molecules/FileProgress/FileProgress.d.ts

@@ -0,0 +1,27 @@
+import { FileProgressProps } from "./FileProgress.types.js";
+import { FC } from "react";
+
+//#region src/molecules/FileProgress/FileProgress.d.ts
+interface FileProgressPropsExtension {
+  showCompleteState: boolean;
+  handleOnClick: () => void;
+  isDeleting: boolean;
+}
+/**
+ * @param onDelete - call back when clicking delete
+ * @param file - file to show progress for (FileWithPath or File)
+ * @param onCancel - call back when clicking cancel
+ * @param isError - if the file upload has an error
+ * @param isDone - if the file upload is done
+ * @param progressPercent - the percentage of the file that has been uploaded
+ * @param indeterminate - if the file upload progress is indeterminate
+ * @param compact - if the file progress should use compact mode
+ * @param fullErrorText - the full error text to show when hovering over the error icon
+ * @param customLoadingText - custom loading text to show
+ * @param customCompleteText - custom complete text to show
+ * @param onRetry - call back when clicking retry on a failed upload
+ * @param shortErrorText - short error text to show (in compact mode)
+ */
+declare const FileProgress: FC<FileProgressProps>;
+//#endregion
+export { FileProgress, FileProgressPropsExtension };

package/dist/molecules/FileProgress/FileProgress.js

@@ -0,0 +1 @@
+import e from"./CompactFileProgress.js";import t from"./RegularFileProgress.js";import{useMemo as n,useState as r}from"react";import{jsx as i}from"react/jsx-runtime";const a=a=>{let[o,s]=r(!1),c=n(()=>a.isError??a.isDone===void 0?!0:a.isDone,[a.isError,a.isDone]),l=async()=>{!c&&a.onCancel?a.onCancel():a.onDelete&&(s(!0),await a.onDelete(),s(!1))};return a.compact?i(e,{...a,isDeleting:o,showCompleteState:c,handleOnClick:l}):i(t,{...a,isDeleting:o,showCompleteState:c,handleOnClick:l})};export{a as FileProgress};

package/dist/molecules/FileProgress/FileProgress.types.d.ts

@@ -0,0 +1,39 @@
+import { FileWithPath } from "react-dropzone";
+
+//#region src/molecules/FileProgress/FileProgress.types.d.ts
+interface FileProgressBaseProps {
+  onDelete?: () => Promise<void> | void;
+  file: FileWithPath | File;
+  onCancel?: () => void;
+  isError?: boolean;
+  isDone?: boolean;
+}
+type DoneFileProgress = FileProgressBaseProps & {
+  isDone: true;
+  indeterminate?: undefined;
+  progressPercent?: undefined;
+};
+type ProgressPercentFileProgress = FileProgressBaseProps & {
+  progressPercent: number;
+  indeterminate?: false;
+};
+type IndeterminateFileProgress = FileProgressBaseProps & {
+  progressPercent?: undefined;
+  indeterminate: true;
+};
+type FileProgressBase = ProgressPercentFileProgress | IndeterminateFileProgress | DoneFileProgress;
+type RegularFileProgressBaseProps = FileProgressBase & {
+  compact?: false;
+  fullErrorText?: string;
+  customLoadingText?: string;
+  customCompleteText?: string;
+  onRetry?: () => void;
+};
+type CompactFileProgressBaseProps = FileProgressBase & {
+  compact: true;
+  shortErrorText?: string;
+  fullErrorText?: string;
+};
+type FileProgressProps = RegularFileProgressBaseProps | CompactFileProgressBaseProps;
+//#endregion
+export { FileProgressProps };

package/dist/molecules/FileProgress/FileProgress.utils.js

@@ -0,0 +1 @@
+import{file_description as e,library_pdf as t}from"@equinor/eds-icons";function n(e){let t=new FileReader;return new Promise((n,r)=>{t.onerror=()=>{t.abort(),r(new DOMException(`Problem parsing input file.`))},t.onload=()=>{n(t.result)},t.readAsDataURL(e)})}function r(e){return/\.(jpe?g|png|gif|bmp)$/i.test(e)}function i(n){let r=n.split(`.`).pop();switch(r){case`pdf`:return t;default:return e}}export{i as getFileIcon,r as isFileImage,n as readUploadedFileAsText};

package/dist/molecules/FileProgress/RegularFileProgress.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{formatDataSize as t}from"../../atoms/utils/size.js";import{Container as n,FileName as r,LinearProgress as i,ProgressWrapper as a,RegularFileProgressDetails as o,RegularFileProgressWrapper as s}from"./RegularFileProgress.styles.js";import{useMemo as c}from"react";import{Button as l,CircularProgress as u,Icon as d,Typography as f}from"@equinor/eds-core-react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{close_circle_outlined as h,delete_to_trash as g,file as _,refresh as v}from"@equinor/eds-icons";const y=({onRetry:y,file:b,customLoadingText:x,customCompleteText:S,isError:C,fullErrorText:w,showCompleteState:T,handleOnClick:E,isDeleting:D,...O})=>{let k=c(()=>{if(!b?.size||O.isDone||O.indeterminate||O.progressPercent===void 0)return 1;let e=b.size/100*O.progressPercent;return t({inputFormat:`B`,size:e,decimals:1})},[b?.size,O]),A=c(()=>{if(C)return w??`An error has occurred`;let e=x??`loading...`,t=S??`File uploaded!`;return T?t:e},[S,x,w,T,C]);return m(n,{$isError:C,children:[p(d,{data:_,color:C?e.interactive.warning__hover.rgba:e.interactive.primary__resting.rgba,size:32}),m(s,{children:[m(r,{children:[p(f,{variant:`caption`,children:b.name}),m(`div`,{children:[D?p(l,{variant:`ghost_icon`,children:p(u,{size:24})}):O.onDelete&&p(l,{variant:`ghost_icon`,onClick:E,"data-testid":`delete-file`,children:p(d,{data:T?g:h,color:e.text.static_icons__tertiary.rgba,size:24})}),C&&y&&p(l,{variant:`ghost_icon`,onClick:y,children:p(d,{data:v,color:e.text.static_icons__tertiary.rgba,size:24})})]})]}),p(a,{children:!T&&!O.isDone&&p(i,{variant:O.indeterminate?`indeterminate`:`determinate`,value:O.indeterminate?void 0:O.progressPercent})}),m(o,{children:[p(f,{variant:`overline`,children:A}),b?.size&&p(f,{variant:`overline`,children:T?t({size:b.size,decimals:1,inputFormat:`B`}):`${k} of ${t({size:b.size,decimals:1,inputFormat:`B`})}`})]})]})]})};export{y as default};

package/dist/molecules/FileProgress/RegularFileProgress.styles.js

@@ -0,0 +1,35 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{LinearProgress as n}from"@equinor/eds-core-react";import r from"styled-components";const i=r.div`
+  max-width: 555px;
+  padding: ${t.medium} ${t.large};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${t.medium};
+  border: 1px solid
+    ${({$isError:t})=>t?e.interactive.warning__hover.rgba:e.ui.background__medium.rgba};
+  border-radius: 4px;
+`,a=r.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,o=r.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.small};
+  justify-content: space-between;
+  min-height: 40px;
+  word-break: break-word;
+`,s=r.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-top: ${t.small};
+`,c=r.div`
+  min-height: 4px;
+`,l=r(n)`
+  background-color: ${e.interactive.primary__hover_alt.rgba};
+
+  div {
+    background-color: ${e.interactive.primary__resting.rgba};
+  }
+`;export{i as Container,o as FileName,l as LinearProgress,c as ProgressWrapper,s as RegularFileProgressDetails,a as RegularFileProgressWrapper};

package/dist/molecules/FileUploadArea/FileUploadArea.constants.js

@@ -0,0 +1 @@
+const e=`file-upload-scrim`;export{e as FILE_UPLOAD_SCRIM_ID};

package/dist/molecules/FileUploadArea/FileUploadArea.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { DropzoneOptions } from "react-dropzone";
+
+//#region src/molecules/FileUploadArea/FileUploadArea.d.ts
+type FileUploadAreaProps = {
+  size?: 'small' | 'medium' | 'large';
+} & DropzoneOptions;
+declare const FileUploadArea: FC<FileUploadAreaProps>;
+//#endregion
+export { FileUploadArea, FileUploadAreaProps };

package/dist/molecules/FileUploadArea/FileUploadArea.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{Button as t}from"../Button/Button.js";import{OptionalTooltip as n}from"../OptionalTooltip/OptionalTooltip.js";import{DividerRow as r,MediumUploadWrapper as i,SmallUploadWrapper as a,UploadWrapper as o}from"./FileUploadArea.styles.js";import{FILE_UPLOAD_SCRIM_ID as s}from"./FileUploadArea.constants.js";import{UploadIllustration as c}from"./UploadIllustration.js";import{useEffect as l,useMemo as u}from"react";import{Icon as d,Typography as f}from"@equinor/eds-core-react";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{folder as h}from"@equinor/eds-icons";import{useDropzone as g}from"react-dropzone";const _=({size:_=`large`,...v})=>{let{getRootProps:y,getInputProps:b,isDragActive:x}=g({...v});l(()=>{let t=()=>{if(!window.document.getElementById(s)){let t=document.createElement(`div`);t.id=s,t.style.position=`fixed`,t.style.top=`0`,t.style.left=`0`,t.style.width=`100%`,t.style.height=`100%`,t.style.backgroundColor=e.ui.background__scrim.rgba,t.style.zIndex=`9999`,t.style.pointerEvents=`none`,window.document.body.appendChild(t)}},n=()=>{let e=window.document.getElementById(s);e!==null&&e.remove()};return window.document.addEventListener(`dragover`,t),window.document.addEventListener(`dragend`,n),window.document.addEventListener(`mouseleave`,()=>n),()=>{window.document.removeEventListener(`dragover`,t),window.document.removeEventListener(`dragend`,n),window.document.removeEventListener(`mouseleave`,n)}},[]);let S=u(()=>{if(v.accept)return Object.values(v.accept).join(`, `)},[v.accept]);return _==`small`?m(a,{...y(),style:{background:x?e.interactive.primary__hover_alt.rgba:void 0},children:[p(`input`,{"data-testid":`file-upload-area-input`,...b()}),p(c,{}),p(f,{variant:`meta`,children:`Upload file`}),v.accept&&p(n,{title:`Supported filetypes: ${S}`,children:m(f,{variant:`meta`,children:[`(`,S,`)`]})})]}):_==`medium`?m(i,{...y(),style:{background:x?e.interactive.primary__hover_alt.rgba:void 0},children:[p(`input`,{"data-testid":`file-upload-area-input`,...b()}),p(c,{}),m(`section`,{children:[p(f,{variant:`button`,group:`navigation`,children:`Drag files here`}),v.accept&&p(n,{title:`Supported filetypes: ${S}`,children:p(f,{group:`paragraph`,variant:`meta`,color:e.text.static_icons__tertiary.rgba,children:S})})]}),m(r,{children:[p(`hr`,{}),p(f,{variant:`meta`,children:`OR`}),p(`hr`,{})]}),m(t,{variant:`ghost`,onClick:y().onClick,children:[p(d,{data:h}),`Browse files`]})]}):m(o,{...y(),onClick:void 0,style:{background:x?e.interactive.primary__hover_alt.rgba:void 0},children:[p(`input`,{"data-testid":`file-upload-area-input`,...b()}),p(c,{}),m(`section`,{children:[p(f,{variant:`button`,group:`navigation`,children:`Drag files here to upload.`}),v.accept&&m(f,{group:`paragraph`,variant:`meta`,color:e.text.static_icons__tertiary.rgba,children:[`Supported filetypes: `,S]})]}),m(r,{children:[p(`hr`,{}),p(f,{variant:`button`,group:`navigation`,children:`OR`}),p(`hr`,{})]}),m(t,{variant:`ghost`,onClick:y().onClick,children:[p(d,{data:h}),`Browse files`]})]})};export{_ as FileUploadArea};

package/dist/molecules/FileUploadArea/FileUploadArea.styles.js

@@ -0,0 +1,88 @@
+import{animation as e}from"../../atoms/style/animation.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import r from"styled-components";const i=r.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: ${n.small};
+  justify-content: center;
+  flex-direction: column;
+  border: 2px dashed ${t.interactive.primary__resting.rgba};
+  border-radius: 15px;
+  padding: ${n.medium_small} ${n.xx_large};
+  /* v8 ignore next */
+  background: ${t.ui.background__light.rgba};
+  transition: background ${e.transitionMS};
+  z-index: 10000;
+
+  > svg {
+    flex-shrink: 0;
+  }
+
+  > p {
+    text-wrap: nowrap;
+  }
+
+  > section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: ${n.x_small};
+    margin: calc(${n.medium_small} / 2) 0;
+  }
+`,a=r(i)`
+  width: 88px;
+  height: 88px;
+  margin-bottom: 1.6em;
+  > svg {
+    width: 48px;
+    height: 48px;
+  }
+  > p {
+    color: ${t.interactive.primary__resting.rgba};
+  }
+  > p:last-child {
+    color: ${t.text.static_icons__tertiary.rgba};
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    position: absolute;
+    bottom: calc((1.6em + ${n.small}) * -1);
+  }
+
+  &:hover {
+    cursor: pointer;
+    background: ${t.interactive.primary__hover_alt.rgba};
+  }
+`,o=r(i)`
+  width: 180px;
+  height: 180px;
+  gap: 0;
+  > svg {
+    width: 62px;
+    height: 62px;
+  }
+  > section > p {
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  > button {
+    margin-top: ${n.x_small};
+    text-wrap: nowrap;
+  }
+`,s=r.div`
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  width: 100%;
+  gap: ${n.x_small};
+  align-items: center;
+
+  > p {
+    color: ${t.text.static_icons__tertiary.rgba};
+  }
+
+  > hr {
+    width: 100%;
+    height: 2px;
+  }
+`;export{s as DividerRow,o as MediumUploadWrapper,a as SmallUploadWrapper,i as UploadWrapper};

package/dist/molecules/FileUploadArea/UploadIllustration.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const n=()=>t(`svg`,{"data-testid":`upload-illustration`,width:`73`,height:`72`,viewBox:`0 0 73 72`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:[e(`path`,{d:`M10.5269 25.5806C10.5269 24.4761 11.4223 23.5806 12.5269 23.5806H57.7912C58.8958 23.5806 59.7912 24.4761 59.7912 25.5806V60.1295C59.7912 61.234 58.8958 62.1295 57.7912 62.1295H12.5269C11.4223 62.1295 10.5269 61.234 10.5269 60.1295V25.5806Z`,fill:`#C9E0E2`}),e(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M57.7912 25.5806H12.5269L12.5269 60.1295H57.7912L57.7912 25.5806ZM12.5269 23.5806C11.4223 23.5806 10.5269 24.4761 10.5269 25.5806V60.1295C10.5269 61.234 11.4223 62.1295 12.5269 62.1295H57.7912C58.8958 62.1295 59.7912 61.234 59.7912 60.1295V25.5806C59.7912 24.4761 58.8958 23.5806 57.7912 23.5806H12.5269Z`,fill:`#007079`}),e(`path`,{d:`M61.8817 63.5719L66.7565 33.1905C66.9516 31.9751 66.0128 30.8737 64.7818 30.8737H43.0756C42.6971 30.8737 42.3263 30.9811 42.0064 31.1834L31.4559 37.8569C31.136 38.0593 30.7653 38.1667 30.3867 38.1667H7.75437C6.52339 38.1667 5.5846 39.2681 5.77963 40.4835L9.48431 63.5719C9.63993 64.5418 10.4768 65.2551 11.4591 65.2551H59.9069C60.8892 65.2551 61.726 64.5418 61.8817 63.5719Z`,fill:`white`}),e(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M43.0758 31.8737C42.8865 31.8737 42.7012 31.9274 42.5412 32.0285L42.0109 31.1901L42.5412 32.0285L31.9907 38.7021C31.5108 39.0056 30.9547 39.1667 30.387 39.1667H7.7546C7.13911 39.1667 6.66972 39.7174 6.76723 40.3251L10.4719 63.4135C10.5497 63.8984 10.9682 64.2551 11.4593 64.2551H59.9071C60.3983 64.2551 60.8167 63.8984 60.8945 63.4135L65.7694 33.0321C65.8669 32.4244 65.3975 31.8737 64.782 31.8737H43.0758ZM41.4721 30.3383C41.9519 30.0348 42.508 29.8737 43.0758 29.8737H64.782C66.6285 29.8737 68.0367 31.5258 67.7442 33.3489L62.8693 63.7303C62.6358 65.1851 61.3805 66.2551 59.9071 66.2551H11.4593C9.9859 66.2551 8.7306 65.1851 8.49717 63.7303L4.79249 40.642C4.49995 38.8188 5.90813 37.1667 7.7546 37.1667H30.387C30.5762 37.1667 30.7616 37.113 30.9215 37.0118L41.4721 30.3383Z`,fill:`#007079`}),e(`path`,{d:`M31.5987 48.072C31.5987 49.5367 30.7009 50.724 29.5933 50.724C28.4858 50.724 27.5879 49.5367 27.5879 48.072C27.5879 46.6073 28.4858 45.42 29.5933 45.42C30.7009 45.42 31.5987 46.6073 31.5987 48.072Z`,fill:`#007079`}),e(`path`,{d:`M42.4933 48.072C42.4933 49.5367 41.5954 50.724 40.4879 50.724C39.3803 50.724 38.4824 49.5367 38.4824 48.072C38.4824 46.6073 39.3803 45.42 40.4879 45.42C41.5954 45.42 42.4933 46.6073 42.4933 48.072Z`,fill:`#007079`}),e(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M29.0414 53.8623C29.4765 53.5221 30.1049 53.5991 30.4451 54.0342C31.1297 54.9099 32.4297 55.9577 34.0448 56.2581C35.5886 56.5452 37.5937 56.1826 39.8467 53.9411C40.2383 53.5516 40.8714 53.5533 41.2609 53.9448C41.6505 54.3363 41.6488 54.9695 41.2573 55.359C38.6077 57.9949 35.9599 58.6485 33.6791 58.2243C31.4698 57.8134 29.7737 56.4225 28.8695 55.266C28.5293 54.8309 28.6063 54.2024 29.0414 53.8623Z`,fill:`#007079`}),e(`path`,{d:`M37.4846 20.618L47.8301 2.79122L56.0429 7.50852L58.2518 15.7099L50.9237 28.3372L37.4846 20.618Z`,fill:`white`}),e(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M49.1637 2.13819L57.0901 6.69096L59.6027 16.0198L52.7382 27.8482C52.109 28.9325 50.7024 29.3074 49.6126 28.6814L37.7131 21.8466C36.6232 21.2206 36.2562 19.8269 36.8854 18.7427L46.048 2.9771C46.6772 1.89282 48.0738 1.51219 49.1637 2.13819ZM48.0197 4.1096L38.867 19.8809L50.7566 26.71L57.049 15.8673L52.0951 13.0218L54.9552 8.09327L48.0197 4.1096Z`,fill:`#007079`}),e(`path`,{d:`M19.3516 31.8552L22.7911 16.7257L29.7613 18.294L33.1937 23.7048L30.7573 34.4215L19.3516 31.8552Z`,fill:`white`}),e(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M23.6041 15.9592L30.3312 17.4728L34.2354 23.6274L31.9532 33.6661C31.744 34.5863 30.8161 35.169 29.8911 34.9608L19.7921 32.6885C18.8671 32.4804 18.2899 31.5591 18.4991 30.6388L21.5504 17.2558C21.7596 16.3355 22.6792 15.751 23.6041 15.9592ZM23.2238 17.6323L20.1808 31.0173L30.2714 33.2877L32.3635 24.0856L28.159 23.1395L29.11 18.9567L23.2238 17.6323Z`,fill:`#007079`}),e(`path`,{d:`M68.0528 61.742C68.0528 66.855 63.8864 71 58.7468 71C53.6073 71 49.4409 66.855 49.4409 61.742C49.4409 56.6289 53.6073 52.4839 58.7468 52.4839C63.8864 52.4839 68.0528 56.6289 68.0528 61.742Z`,fill:`white`}),e(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M58.7468 69.5C63.0652 69.5 66.5528 66.0193 66.5528 61.742C66.5528 57.4646 63.0652 53.9839 58.7468 53.9839C54.4284 53.9839 50.9409 57.4646 50.9409 61.742C50.9409 66.0193 54.4284 69.5 58.7468 69.5ZM58.7468 71C63.8864 71 68.0528 66.855 68.0528 61.742C68.0528 56.6289 63.8864 52.4839 58.7468 52.4839C53.6073 52.4839 49.4409 56.6289 49.4409 61.742C49.4409 66.855 53.6073 71 58.7468 71Z`,fill:`#007079`}),e(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M60.3359 64V61.2903H62.1516L58.974 58.129L55.7964 61.2903H57.6122V64H60.3359ZM58.974 59.4071L59.9591 60.3871H59.428V63.0968H58.5201V60.3871H57.989L58.974 59.4071ZM62.1516 65.8064V64.9032H55.7964V65.8064H62.1516Z`,fill:`#007079`})]});export{n as UploadIllustration};