@assembly-js/design-system 2.4.0

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,138 @@
+// This file is generated by a script. Do not edit this file directly.
+var _excluded = ["label", "description", "tooltipProps", "checked", "onChange", "disabled", "size", "classes"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import * as React from 'react';
+import { cn } from "../../common/utils";
+import { Base } from "../Typography/Base";
+import { Icon } from "../Icon";
+import { cva } from 'cva';
+import { useRadioGroup } from "../RadioGroup/RadioGroup";
+import { Tooltip } from "../Tooltip/Tooltip";
+export var RadioSize = /*#__PURE__*/function (RadioSize) {
+  RadioSize["DEFAULT"] = "default";
+  RadioSize["LARGE"] = "lg";
+  return RadioSize;
+}({});
+var radioContainerStyles = cva({
+  base: 'cop-cursor-pointer cop-group cop-box-border cop-flex cop-items-center cop-justify-center cop-rounded-full cop-border cop-border-solid cop-outline-none peer-focus-visible:cop-outline-2 peer-focus-visible:cop-outline-[#0071E3]',
+  variants: {
+    size: _defineProperty(_defineProperty({}, RadioSize.DEFAULT, 'cop-h-4 cop-w-4'), RadioSize.LARGE, 'cop-h-[18px] cop-w-[18px]'),
+    checked: {
+      "true": 'cop-border-primary hover:cop-border-[#36424D]',
+      "false": 'cop-border-gray-300 hover:cop-bg-[#F8F9FB]'
+    },
+    disabled: {
+      "true": 'cop-pointer-events-none cop-cursor-default cop-bg-secondary cop-text-[#90959D]',
+      "false": ''
+    }
+  },
+  compoundVariants: [{
+    checked: true,
+    disabled: true,
+    className: '!cop-border-secondary'
+  }],
+  defaultVariants: {
+    size: RadioSize.DEFAULT,
+    checked: false,
+    disabled: false
+  }
+});
+var radioIconStyles = cva({
+  variants: {
+    size: _defineProperty(_defineProperty({}, RadioSize.DEFAULT, 'cop-h-2 cop-w-2'), RadioSize.LARGE, 'cop-h-[10px] cop-w-[10px]'),
+    checked: {
+      "true": 'cop-text-primary group-hover:cop-text-[#36424D]',
+      "false": ''
+    },
+    disabled: {
+      "true": 'cop-text-input-gray',
+      "false": ''
+    }
+  },
+  compoundVariants: [{
+    checked: true,
+    disabled: true,
+    className: '!cop-text-input-gray'
+  }]
+});
+export var Radio = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var label = props.label,
+    description = props.description,
+    tooltipProps = props.tooltipProps,
+    controlledChecked = props.checked,
+    controlledOnChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$size = props.size,
+    size = _props$size === void 0 ? RadioSize.DEFAULT : _props$size,
+    classes = props.classes,
+    rest = _objectWithoutProperties(props, _excluded);
+  var groupContext = useRadioGroup();
+
+  // Determine if the radio is part of a group
+  var isPartOfGroup = !!groupContext;
+
+  // Use context values if part of a group, otherwise rely on props
+  var checked = isPartOfGroup ? (groupContext === null || groupContext === void 0 ? void 0 : groupContext.value) === rest.value : controlledChecked;
+  var handleChange = function handleChange(event) {
+    if (isPartOfGroup && groupContext !== null && groupContext !== void 0 && groupContext.onChange) {
+      groupContext.onChange(event);
+    } else if (controlledOnChange) {
+      controlledOnChange(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(classes === null || classes === void 0 ? void 0 : classes.root)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cop-flex cop-gap-2"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: rest.name
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    id: rest.name,
+    className: "cop-peer cop-sr-only cop-fixed",
+    ref: ref,
+    type: "radio",
+    checked: checked,
+    onChange: handleChange,
+    disabled: disabled
+  }, rest)), /*#__PURE__*/React.createElement("div", {
+    className: cn(radioContainerStyles({
+      size: size,
+      checked: checked,
+      disabled: disabled
+    }), classes === null || classes === void 0 ? void 0 : classes.input)
+  }, checked && /*#__PURE__*/React.createElement(Icon, {
+    icon: "Dot",
+    className: radioIconStyles({
+      size: size,
+      checked: checked,
+      disabled: disabled
+    })
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "cop-flex cop-gap-1"
+  }, /*#__PURE__*/React.createElement(Base, {
+    variant: "body",
+    size: "base",
+    leading: "tight",
+    tag: "span",
+    weight: "medium"
+  }, label), tooltipProps && /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(Icon, {
+    icon: "Info",
+    className: "cop-h-3 cop-w-3 cop-text-primary"
+  }))), description && /*#__PURE__*/React.createElement("div", {
+    className: "cop-mt-0.5 cop-text-secondary"
+  }, /*#__PURE__*/React.createElement(Base, {
+    variant: "body",
+    size: "sm",
+    leading: "normal",
+    tag: "span",
+    weight: "regular"
+  }, description)))));
+});
+Radio.displayName = 'Radio';

package/dist/esm/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,38 @@
+// This file is generated by a script. Do not edit this file directly.
+import React, { createContext, useContext } from 'react';
+import { ChoiceGroupDirection, ChoiceGroupColumns, ChoiceGroupLayout } from "../../common/ChoiceGroupLayout/ChoiceGroupLayout";
+var RadioGroupContext = /*#__PURE__*/createContext(null);
+export var useRadioGroup = function useRadioGroup() {
+  var context = useContext(RadioGroupContext);
+  return context;
+};
+export var RadioGroup = function RadioGroup(_ref) {
+  var label = _ref.label,
+    description = _ref.description,
+    error = _ref.error,
+    helperText = _ref.helperText,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? ChoiceGroupDirection.VERTICAL : _ref$direction,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? ChoiceGroupColumns.SingleCol : _ref$layout,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    children = _ref.children,
+    className = _ref.className,
+    tooltipProps = _ref.tooltipProps;
+  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+    value: {
+      value: value,
+      onChange: onChange
+    }
+  }, /*#__PURE__*/React.createElement(ChoiceGroupLayout, {
+    label: label,
+    description: description,
+    error: error,
+    helperText: helperText,
+    tooltipProps: tooltipProps,
+    className: className,
+    direction: direction,
+    layout: layout
+  }, children));
+};

package/dist/esm/components/Search/Search.js

@@ -0,0 +1,101 @@
+// This file is generated by a script. Do not edit this file directly.
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React from "react";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { Icon } from "../Icon";
+export function Search(_ref) {
+  var _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    onSearch = _ref.onSearch;
+  var inputRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isInitial = _useState4[0],
+    setIsInitial = _useState4[1];
+  var _useState5 = useState('closed'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    interactiveStatus = _useState6[0],
+    setInteractiveStatus = _useState6[1];
+  var buttonStatus = {
+    closed: 'cop-pointer-events-auto',
+    open: 'open cop-pointer-events-none cop-opacity-0'
+  }[interactiveStatus];
+  var inputStatus = {
+    closed: 'cop-pointer-events-none cop-scale-x-0',
+    open: 'open cop-pointer-events-auto cop-scale-x-100 cop-origin-left'
+  }[interactiveStatus];
+  var inputOrigin = {
+    left: 'cop-origin-left',
+    right: 'cop-origin-right'
+  }[align];
+  var alignment = {
+    left: 'cop-left-0',
+    right: 'cop-right-0'
+  }[align];
+  useEffect(function () {
+    var timeout = setTimeout(function () {
+      onSearch(query);
+    }, 300);
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [query, onSearch]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "cop-flex-end cop-relative cop-h-7 cop-flex-1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(buttonStatus, " ").concat(alignment, " cop-absolute cop-top-0")
+  }, /*#__PURE__*/React.createElement(Button, {
+    label: "Search",
+    onClick: function onClick() {
+      var _inputRef$current;
+      setInteractiveStatus('open');
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    },
+    prefixIcon: "Search",
+    variant: "secondary"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(inputStatus, " ").concat(inputOrigin, " cop-relative cop-h-full cop-transition")
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "cop-absolute cop-left-0 cop-top-0 cop-z-10 cop-h-3 cop-w-3 cop-px-3 cop-py-2",
+    icon: "Search"
+  }), /*#__PURE__*/React.createElement(Input, {
+    className: ['cop-border-px', 'cop-h-full', 'cop-border-gray-100', 'cop-pl-8', 'cop-outline-0', 'cop-transition', 'focus-within:cop-border-black', 'focus-visible:cop-outline-0', 'focus-visible:cop-ring-0'].join(' '),
+    containerClassName: [alignment, 'cop-absolute', 'cop-top-0', 'cop-h-full', 'cop-border-px', 'cop-w-full'].join(' '),
+    onBlur: function onBlur() {
+      var _inputRef$current2;
+      if ((inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) === '') {
+        setInteractiveStatus('closed');
+        setIsInitial(true);
+      }
+    },
+    onChange: function onChange(e) {
+      if (isInitial) {
+        setIsInitial(false);
+      }
+      setQuery(e.target.value);
+    },
+    ref: inputRef,
+    value: query
+  }), /*#__PURE__*/React.createElement("button", {
+    className: ['cop-absolute', 'cop-right-0', 'cop-top-0', 'cop-z-10', 'cop-appearance-none', 'cop-border-0', 'cop-bg-transparent', 'cop-px-3', 'cop-py-2', 'cop-outline-0'].join(' '),
+    onClick: function onClick() {
+      setInteractiveStatus('closed');
+      setIsInitial(true);
+      setQuery('');
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "cop-h-3 cop-w-3",
+    icon: "Close"
+  })))));
+}

package/dist/esm/components/Spinner.js

@@ -0,0 +1,34 @@
+// This file is generated by a script. Do not edit this file directly.
+import * as React from 'react';
+var getSizeClassName = function getSizeClassName(size) {
+  switch (size) {
+    case 5:
+      return 'cop-h-5 cop-w-5';
+    case 10:
+    default:
+      return 'cop-h-10 cop-w-10';
+  }
+};
+
+/**
+ * Spinner component is used to indicate a loading state of a component or page.
+ */
+export var Spinner = function Spinner(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "".concat(getSizeClassName(size), " cop-animate-rotate"),
+    color: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "22 22 44 44"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: "cop-animate-dash-circle",
+    cx: "44",
+    cy: "44",
+    r: "20.2",
+    stroke: "currentColor",
+    strokeWidth: "3.6",
+    strokeDasharray: "1,200",
+    strokeDashoffset: "0"
+  }));
+};

package/dist/esm/components/Spinner.stories.js

@@ -0,0 +1,22 @@
+// This file is generated by a script. Do not edit this file directly.
+import { Spinner } from "src/components/Spinner";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+var meta = {
+  title: "Spinner",
+  component: Spinner,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"]
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export var Large = {
+  args: {
+    size: 10
+  }
+};
+export var Small = {
+  args: {
+    size: 5
+  }
+};

package/dist/esm/components/Status/Status.js

@@ -0,0 +1,65 @@
+// This file is generated by a script. Do not edit this file directly.
+import React from 'react';
+import { cva } from 'cva';
+import { Icon } from "../Icon";
+import { Heading } from "../Typography";
+var mapIconToStatus = function mapIconToStatus(status) {
+  switch (status) {
+    case 'info':
+      return 'InfoSolid';
+    case 'success':
+      return 'SuccessSolid';
+    case 'warning':
+      return 'WarningSolid';
+    case 'error':
+      return 'FailedSolid';
+    case 'neutral':
+      return 'ToDo';
+    case 'highlight':
+      return 'New';
+    default:
+      return 'ToDo';
+  }
+};
+var statusClassNames = cva({
+  base: 'cop-rounded-full cop-px-3 cop-w-fit cop-py-0.5',
+  variants: {
+    status: {
+      info: 'cop-text-info cop-bg-info',
+      success: 'cop-text-success cop-bg-success',
+      warning: 'cop-text-warning cop-bg-warning',
+      error: 'cop-text-error cop-bg-error',
+      neutral: 'cop-text-primary cop-bg-secondary',
+      highlight: 'cop-text-highlight cop-bg-highlight'
+    },
+    showIcon: {
+      "true": 'cop-flex cop-gap-1.5 cop-items-center',
+      "false": ''
+    }
+  },
+  defaultVariants: {
+    showIcon: false,
+    status: 'neutral'
+  }
+});
+export var Status = function Status(_ref) {
+  var label = _ref.label,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? 'neutral' : _ref$status,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? false : _ref$showIcon,
+    className = _ref.className,
+    icon = _ref.icon;
+  return /*#__PURE__*/React.createElement("div", {
+    className: statusClassNames({
+      status: status,
+      showIcon: showIcon,
+      className: className
+    })
+  }, showIcon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: icon !== null && icon !== void 0 ? icon : mapIconToStatus(status),
+    className: "cop-h-2.5 cop-w-2.5"
+  }) : null, /*#__PURE__*/React.createElement(Heading, {
+    size: "sm"
+  }, label));
+};

package/dist/esm/components/Tag/Tag.js

@@ -0,0 +1,67 @@
+// This file is generated by a script. Do not edit this file directly.
+import React from 'react';
+import { Base } from "../Typography/Base";
+import { Icon } from "../Icon";
+import { TagImage } from "./TagImage";
+var ColorVariantToBgColors = {
+  "default": 'cop-bg-gray-200',
+  info: 'cop-bg-[#e8f1ff]',
+  success: 'cop-bg-[#e3ffef]',
+  warning: 'cop-bg-[#fff8dd]',
+  danger: 'cop-bg-danger'
+};
+var ColorVariantToBorderColors = {
+  "default": 'cop-border-gray-300',
+  info: 'cop-border-blue-300',
+  success: 'cop-border-green-300',
+  warning: 'cop-border-yellow-300',
+  danger: 'cop-border-red-300'
+};
+var ColorVariantToTextColors = {
+  "default": 'cop-primary',
+  info: 'cop-text-[#0000ff]',
+  success: 'cop-text-[#09aa6c]',
+  warning: 'cop-text-[#ff7800]',
+  danger: 'cop-text-danger'
+};
+var RemoveTag = function RemoveTag(_ref) {
+  var onRemove = _ref.onRemove,
+    onFocus = _ref.onFocus;
+  return /*#__PURE__*/React.createElement("button", {
+    className: "cop-rounded-full cop-border-none cop-bg-transparent cop-p-[2px] cop-text-current cop-shadow-none hover:cop-cursor-pointer hover:cop-bg-white",
+    onClick: onRemove,
+    onFocus: onFocus
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "Close",
+    className: "cop-h-2 cop-w-2 cop-text-xs"
+  }));
+};
+export var Tag = function Tag(_ref2) {
+  var text = _ref2.text,
+    color = _ref2.color,
+    onRemove = _ref2.onRemove,
+    onFocus = _ref2.onFocus,
+    prefix = _ref2.prefix,
+    className = _ref2.className;
+  var bgColorClass = ColorVariantToBgColors[color !== null && color !== void 0 ? color : 'default'];
+  var borderColorClass = ColorVariantToBorderColors[color !== null && color !== void 0 ? color : 'default'];
+  var textColorClass = ColorVariantToTextColors[color !== null && color !== void 0 ? color : 'default'];
+  return /*#__PURE__*/React.createElement("div", {
+    className: ['cop-flex cop-h-[25px] cop-w-fit cop-items-center cop-justify-between cop-gap-[2px] cop-rounded-[35px] cop-border cop-border-solid cop-px-[10px]', bgColorClass, borderColorClass, textColorClass, className !== null && className !== void 0 ? className : ''].join(' ')
+  }, prefix && /*#__PURE__*/React.createElement(React.Fragment, null, prefix === 'Plus' || prefix === 'ChevronDown' ? /*#__PURE__*/React.createElement(Icon, {
+    icon: prefix,
+    className: "cop-h-2 cop-w-2"
+  }) : /*#__PURE__*/React.createElement(TagImage, {
+    src: prefix,
+    className: "cop-h-4 cop-w-4"
+  })), /*#__PURE__*/React.createElement(Base, {
+    size: "sm",
+    variant: "body",
+    tag: "p",
+    leading: "075",
+    weight: "medium"
+  }, text), onRemove && /*#__PURE__*/React.createElement(RemoveTag, {
+    onRemove: onRemove,
+    onFocus: onFocus
+  }));
+};

package/dist/esm/components/Tag/TagImage.js

@@ -0,0 +1,14 @@
+// This file is generated by a script. Do not edit this file directly.
+var _excluded = ["className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { cn } from "../../common/utils";
+export var TagImage = function TagImage(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("img", _extends({
+    className: cn('cop-size-[20px] cop-rounded-full', className)
+  }, props));
+};

package/dist/esm/components/TextLink/TextLink.js

@@ -0,0 +1,55 @@
+// This file is generated by a script. Do not edit this file directly.
+var _excluded = ["children", "variant", "className", "disabled", "href"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import { cva } from 'cva';
+var textLinkClasses = cva({
+  base: 'cop-flex cop-items-center cop-gap-1.5 outline-none cop-outline-solid cop-outline-link cop-outline-offset-[3px] cop-w-fit cop-underline-offset-[3px] cursor-pointer',
+  variants: {
+    variant: {
+      "default": 'cop-text-link cop-no-underline hover:cop-text-link-hover active:cop-text-link-active',
+      secondary: 'cop-text-primary cop-underline',
+      minimal: 'cop-text-secondary cop-no-underline cop-underline hover:cop-underline active:cop-underline'
+    },
+    disabled: {
+      "true": 'cop-pointer-events-none'
+    }
+  },
+  compoundVariants: [{
+    variant: 'default',
+    disabled: true,
+    className: 'cop-text-link-disabled'
+  }, {
+    variant: 'secondary',
+    disabled: true,
+    className: 'cop-opacity-[0.45]'
+  }, {
+    variant: 'minimal',
+    disabled: true,
+    className: 'cop-opacity-[0.45]'
+  }]
+});
+export function TextLink(_ref) {
+  var children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    href = _ref.href,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, disabled ? {
+    'aria-disabled': 'true'
+  } : {
+    href: href
+  }, {
+    className: textLinkClasses({
+      variant: variant,
+      className: className,
+      disabled: disabled
+    }),
+    "data-cop-text-link": true // Used to exclude this component from certain styles in the webapp
+  }), children);
+}

package/dist/esm/components/Toast/Toast.js

@@ -0,0 +1,88 @@
+// This file is generated by a script. Do not edit this file directly.
+'use client';
+
+var _excluded = ["className"],
+  _excluded2 = ["className", "variant"],
+  _excluded3 = ["variant"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva } from 'cva';
+import { cn } from "../../common/utils";
+import { Check, Close, Info, Upload } from "../../icons";
+var ToastProvider = ToastPrimitives.Provider;
+var ToastViewport = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ToastPrimitives.Viewport, _extends({
+    ref: ref,
+    className: cn('cop-fixed cop-bottom-0 cop-right-20 cop-z-[100]  sm:cop-w-[220px] md:cop-w-[404px]', className)
+  }, props));
+});
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+var variantsClassnames = {
+  "default": 'cop-border-[#EFF1F4]',
+  success: 'cop-border-l-[#09AA6C]',
+  info: 'cop-border-l-[#FFA500]',
+  progress: 'cop-border-l-[#212B36]',
+  error: 'cop-border-l-[#CC0000]'
+};
+var toastVariants = cva({
+  base: 'cop-group cop-border cop-border-solid cop-border-[#EFF1F4] cop-border-l-4 cop-pointer-events-auto cop-relative cop-flex cop-w-full cop-items-center cop-justify-between cop-space-x-2 cop-overflow-hidden cop-rounded-md cop-p-4 cop-shadow-lg transition-all data-[swipe=cancel]:cop-translate-x-0 data-[swipe=end]:cop-translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:cop-translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:cop-transition-none data-[state=open]:cop-animate-in data-[state=closed]:cop-animate-out data-[swipe=end]:cop-animate-out data-[state=closed]:cop-slide-out-to-right-full data-[state=open]:cop-slide-in-from-right-full',
+  variants: {
+    variant: variantsClassnames
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+});
+var Toast = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    variant = _ref2.variant,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(ToastPrimitives.Root, _extends({
+    ref: ref,
+    className: cn(toastVariants({
+      variant: variant
+    }), className)
+  }, props));
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+var ToastClose = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ToastPrimitives.Close, _extends({
+    className: "cop-border-none cop-bg-inherit cop-outline-0",
+    ref: ref,
+    "toast-close": ""
+  }, props), /*#__PURE__*/React.createElement(Close, {
+    className: "cop-h-4 cop-w-4 cop-text-secondary"
+  }));
+});
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+var ToastIcon = function ToastIcon(_ref3) {
+  var variant = _ref3.variant,
+    props = _objectWithoutProperties(_ref3, _excluded3);
+  var Icon = {
+    success: Check,
+    error: Close,
+    info: Info,
+    progress: Upload,
+    "default": function _default() {
+      return null;
+    }
+  }[variant];
+  var bgColor = {
+    success: 'cop-bg-[#09AA6C]',
+    error: 'cop-bg-[#CC0000]',
+    info: 'cop-bg-[#FFA500]',
+    progress: 'cop-bg-[#212B36]',
+    "default": 'cop-bg-[#EFF1F4]'
+  }[variant];
+  return /*#__PURE__*/React.createElement("div", {
+    className: ['cop-flex cop-min-h-7 cop-min-w-7 cop-items-center cop-justify-center cop-rounded-full cop-text-white', bgColor].join(' ')
+  }, /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
+    className: "cop-h-4 cop-w-4"
+  })));
+};
+export { ToastProvider, ToastViewport, Toast, ToastClose, ToastIcon };