@soul-refiner/design-system 2.0.0-alpha.20 → 2.0.0-alpha.21

package/dist/src/components/input/select/select.js

@@ -1,56 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var paragraph = require('../../atoms/typography/paragraph.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Select = ({ label, onClick, selected, sx, value, }) => {
-    return (React__default.default.createElement(Label, { onClick: (event) => onClick(event, value), "$sx": sx },
-        React__default.default.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),
-        React__default.default.createElement(SelectBox, { "$selected": selected }),
-        React__default.default.createElement(paragraph.P, { as: "div" }, label)));
-};
-const Label = styled.styled.div `
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 24px;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-
-  input {
-    display: none;
-  }
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const SelectBox = styled.styled.div `
-  position: relative;
-  width: 18px;
-  height: 18px;
-  border: 1px solid var(--color-grey-8);
-  border-radius: 4px;
-  flex-shrink: 0;
-
-  ${({ $selected }) => $selected
-    ? `
-    background-color: var(--color-primary-blue-2);
-    border-color: var(--color-primary-blue-2);
-    
-    &::after {
-      position: absolute;
-      content: '✔';
-      top: -1px;
-      left: 4px;
-      font-size: 13px;
-      color: var(--color-white);
-      font-weight: 500;
-    }`
-    : ''}
-`;
-
-exports.Select = Select;

package/dist/src/components/input/text_area/text_area.js

@@ -1,120 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var box = require('../../atoms/box/box.js');
-var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
-var alert_circle = require('../../../icons/notifications/alert_circle.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, minHeight, minWidth, name, onChange, placeholder, resize = false, successful, sx, value, warning, }) => {
-    const ref = React__default.default.useRef(null);
-    React__default.default.useEffect(() => {
-        if (ref.current) {
-            ref.current.style.height = `${minHeight}px`;
-            const scrollHeight = ref.current.scrollHeight;
-            ref.current.style.height = scrollHeight + 'px';
-        }
-    }, [ref.current, value]);
-    return (React__default.default.createElement(Label, { "$disabled": disabled, "$sx": sx },
-        label,
-        React__default.default.createElement(InputWrapper, { "$bg": bg, "$minWidth": minWidth, "$successful": successful, "$warning": warning },
-            icon,
-            React__default.default.createElement(TextAreaElement, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, ref: ref, value: maxCharacters
-                    ? value.slice(0, maxCharacters - 1)
-                    : value, "$minHeight": minHeight, "$resize": resize }),
-            successful && React__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
-            warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
-        React__default.default.createElement(box.Box, { "$gap": 16, "$justify": "space-between" },
-            helperText && React__default.default.createElement(HelperText, null, helperText),
-            maxCharacters && (React__default.default.createElement(MaxCharactersText, null,
-                value.length,
-                " / ",
-                maxCharacters)))));
-};
-const Label = styled.styled.label `
-  width: 100%;
-  display: flex;
-  gap: 4px;
-  flex-flow: column nowrap;
-  color: var(--color-grey-2);
-  font-family: var(--font-inter);
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 26px;
-
-  ${({ $disabled }) => $disabled
-    ? `
-    color: var(--color-grey-7) !important;
-    & > * {
-      color: var(--color-grey-7) !important;
-    }
-    & > div:first-of-type {
-      background-color: var(--color-grey-9) !important;
-    }`
-    : ''}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const InputWrapper = styled.styled.div `
-  min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')}
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 12px;
-  background-color: ${({ $bg }) => $bg};
-  border-radius: 8px;
-  border: 1px solid transparent;
-
-  &:hover {
-    border-color: var(--color-grey-8);
-  }
-
-  &:focus-within {
-    border-color: var(--color-primary-blue-2);
-  }
-
-  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
-  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
-`;
-const TextAreaElement = styled.styled.textarea `
-  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')}
-  padding: 0px;
-  flex: 1;
-  font-family: var(--font-inter);
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-grey-3);
-  border: none;
-  outline: none;
-  border-radius: 8px;
-  background-color: transparent;
-
-  &::placeholder {
-    color: var(--color-grey-6);
-  }
-
-  ${({ $resize }) => ($resize ? '' : 'resize: none;')}
-`;
-const HelperText = styled.styled.p `
-  color: var(--color-grey-4);
-  font-family: var(--font-inter);
-  font-size: 14px;
-  line-height: 20px;
-`;
-const MaxCharactersText = styled.styled.p `
-  text-align: right;
-  color: var(--color-grey-6);
-  font-family: var(--font-inter);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-`;
-
-exports.TextArea = TextArea;

package/dist/src/components/input/text_input/text_input.js

@@ -1,157 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var chip = require('../../feedback/chip/chip.js');
-var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
-var alert_circle = require('../../../icons/notifications/alert_circle.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size = 'large', successful, sx, value, warning, type = 'text', placeIconAtTheEnd = false, inputSx, }) => {
-    const id = React__default.default.useId();
-    const isMultiple = multiple;
-    const [multipleValueToAdd, setMultipleValueToAdd] = React__default.default.useState('');
-    const handleMultipleValueToAdd = (event) => {
-        setMultipleValueToAdd(event.target.value);
-    };
-    /**
-     * when there is no text in the input,
-     * pop the previous multiple value out
-     */
-    const handleMultipleValueDelete = (event) => {
-        if (value.length &&
-            onMultipleChange &&
-            !multipleValueToAdd &&
-            (event.key === 'Delete' || event.key === 'Backspace')) {
-            onMultipleChange(value.slice(0, value.length - 1));
-        }
-    };
-    /**
-     * when a user presses enter (submit) add the input to the values
-     * but don't add the same value twice
-     */
-    const handleMultipleAdd = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const alreadyHasValue = value.includes(multipleValueToAdd);
-        if (onMultipleChange && !alreadyHasValue) {
-            onMultipleChange([...value, multipleValueToAdd]);
-        }
-        setMultipleValueToAdd('');
-    };
-    /**
-     * when the user clicks on the chip to remove it, remove it frm the value
-     */
-    const handleMultipleItemRemoval = (removalItem) => {
-        onMultipleChange &&
-            onMultipleChange(value.filter((item) => item !== removalItem));
-    };
-    return (React__default.default.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
-        label,
-        React__default.default.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
-            !placeIconAtTheEnd && icon,
-            isMultiple && (React__default.default.createElement(MultipleInputWrapper, { onSubmit: handleMultipleAdd },
-                value.filter(Boolean).map((item, index) => (React__default.default.createElement(chip.Chip, { key: id + item + index, color: "blue", size: "small", onDismiss: () => handleMultipleItemRemoval(item) }, item))),
-                React__default.default.createElement(Input, { onChange: handleMultipleValueToAdd, onKeyDown: handleMultipleValueDelete, value: multipleValueToAdd, "$size": size, "$sx": inputSx }))),
-            !isMultiple && (React__default.default.createElement(Input, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, value: type === 'number'
-                    ? value
-                    : maxCharacters
-                        ? value?.slice(0, maxCharacters - 1) || ''
-                        : value, "$size": size, type: type, "$sx": inputSx })),
-            maxCharacters && type !== 'number' && !placeIconAtTheEnd && (React__default.default.createElement(MaxCharactersText, { "$size": size },
-                value?.length || 0,
-                " / ",
-                maxCharacters)),
-            placeIconAtTheEnd && icon,
-            successful && React__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3" }),
-            warning && React__default.default.createElement(alert_circle.AlertCircle, { color: "red-4" })),
-        helperText && React__default.default.createElement(HelperText, { "$size": size }, helperText)));
-};
-const Label = styled.styled.div `
-  width: 100%;
-  display: flex;
-  gap: 4px;
-  flex-flow: column nowrap;
-  color: var(--color-grey-2);
-  font-family: var(--font-inter);
-  font-size: ${({ $size }) => ($size === 'small' ? 16 : 18)}px;
-  font-weight: 500;
-  line-height: ${({ $size }) => ($size === 'small' ? 24 : 26)}px;
-
-  ${({ $disabled }) => $disabled
-    ? `
-    color: var(--color-grey-7) !important;
-    & > * {
-      color: var(--color-grey-7) !important;
-    }
-    & > div {
-      background-color: var(--color-grey-9) !important;
-    }`
-    : ''}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const InputWrapper = styled.styled.div `
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  box-sizing: border-box;
-  padding: ${({ $size }) => ($size === 'small' ? '6px 12px' : '12px')};
-  background-color: ${({ $bg }) => $bg};
-  border-radius: 8px;
-  border: 1px solid transparent;
-
-  &:hover {
-    border-color: var(--color-grey-8);
-  }
-
-  &:focus-within {
-    border-color: var(--color-primary-blue-2);
-  }
-
-  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
-  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
-`;
-const Input = styled.styled.input `
-  padding: 0px;
-  flex: 1;
-  font-family: var(--font-inter);
-  font-size: ${({ $size }) => ($size === 'small' ? 14 : 16)}px;
-  line-height: ${({ $size }) => ($size === 'small' ? 20 : 24)}px;
-  color: var(--color-grey-3);
-  border: none;
-  outline: none;
-  border-radius: 8px;
-  background-color: transparent;
-
-  &::placeholder {
-    color: var(--color-grey-6);
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const HelperText = styled.styled.span `
-  color: var(--color-grey-4);
-  font-family: var(--font-inter);
-  font-size: ${({ $size }) => ($size === 'small' ? 12 : 14)}px;
-  line-height: ${({ $size }) => ($size === 'small' ? 16 : 20)}px;
-`;
-const MaxCharactersText = styled.styled.span `
-  color: var(--color-grey-6);
-  font-family: var(--font-inter);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-`;
-const MultipleInputWrapper = styled.styled.form `
-  display: flex;
-  flex-flow: row wrap;
-  gap: 8px 16px;
-`;
-
-exports.TextInput = TextInput;

package/dist/src/components/input/time/time.js

@@ -1,80 +0,0 @@
-"use client";
-'use strict';
-
-var dropdown = require('../../actions/dropdown/dropdown.js');
-var React = require('react');
-var styled = require('styled-components');
-var clock = require('../../../icons/time/clock.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Time = ({ selectedTime, setTime, selectedPeriod, setPeriod, }) => {
-    const hours = React__default.default.useMemo(() => {
-        const hours = [];
-        for (let i = 1; i <= 12; i++) {
-            hours.push(`${i}:00`);
-            hours.push(`${i}:15`);
-            hours.push(`${i}:30`);
-            hours.push(`${i}:45`);
-        }
-        return hours;
-    }, []);
-    return (React__default.default.createElement(dropdown.Dropdown, { options: hours.map((hour) => ({
-            value: hour,
-            label: hour,
-        })), containerSx: "height: 440px;", trigger: React__default.default.createElement(InputWrapper, null,
-            React__default.default.createElement(Input, { readOnly: true, value: `${selectedTime} ${selectedPeriod}` }),
-            React__default.default.createElement(clock.Clock, null)), additionalOptions: [
-            {
-                label: 'AM',
-                value: 'AM',
-            },
-            {
-                label: 'PM',
-                value: 'PM',
-            },
-        ], onChange: (event) => {
-            const value = event.target.getAttribute('data-value') ?? '';
-            setTime(value);
-        }, additionalOnChange: setPeriod, defaultValue: selectedTime, defaultAdditionalValue: selectedPeriod }));
-};
-const InputWrapper = styled.styled.div `
-  width: fit-content;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 12px;
-  background-color: var(--color-blue-10);
-  border-radius: 8px;
-  border: 1px solid transparent;
-
-  &:hover {
-    border-color: var(--color-grey-8);
-  }
-
-  &:focus-within {
-    border-color: var(--color-primary-blue-2);
-  }
-`;
-const Input = styled.styled.input `
-  max-width: 120px;
-  padding: 0px;
-  flex: 1;
-  font-family: var(--font-inter);
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-grey-3);
-  border: none;
-  outline: none;
-  border-radius: 8px;
-  background-color: transparent;
-
-  &::placeholder {
-    color: var(--color-grey-6);
-  }
-`;
-
-exports.Time = Time;

package/dist/src/components/media/video/video.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ReactPlayer = require('react-player');
-var Image = require('next/image');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var ReactPlayer__default = /*#__PURE__*/_interopDefaultCompat(ReactPlayer);
-var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
-
-const Video = ({ controls = true, loop = false, muted, playsInline, src, subtitles, style, thumbnail, }) => {
-    const ref = React__default.default.useRef(null);
-    return (React__default.default.createElement(ReactPlayer__default.default, { config: {
-            file: {
-                attributes: {
-                    crossOrigin: 'true',
-                },
-                forceHLS: true,
-                hlsOptions: {
-                    autoStartLoad: true,
-                },
-                tracks: subtitles?.map((subtitle) => ({
-                    kind: 'subtitles',
-                    label: subtitle.label,
-                    src: subtitle.src,
-                    srcLang: subtitle.locale,
-                })),
-            },
-        }, controls: controls, height: "100%", light: thumbnail ? (React__default.default.createElement(Image__default.default, { alt: "thumbnail for trailer", layout: "fill", priority: true, quality: 100, src: thumbnail, style: { objectFit: 'contain' } })) : undefined, loop: loop, muted: muted, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
-            backgroundColor: 'var(--color-grey-0)',
-            maxHeight: 720,
-            maxWidth: 1280,
-            minHeight: 480,
-            overflow: 'hidden',
-            position: 'relative',
-            ...(style || {}),
-        }, url: src, width: "100%" }));
-};
-
-exports.Video = Video;

package/dist/src/components/media/video-player/playlist-item.js

@@ -1,48 +0,0 @@
-'use strict';
-
-var React = require('react');
-var Image = require('next/image');
-var styled = require('styled-components');
-var box = require('../../atoms/box/box.js');
-var seconds_to_duration = require('../../atoms/seconds_to_duration/seconds_to_duration.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-var lock = require('../../../icons/security/lock.js');
-var play_solid = require('../../../icons/audio_video/play_solid.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
-
-const PlaylistItem = ({ duration, onClick, playable, progress = 0, shortDescription, thumbnail, title, }) => {
-    return (React__default.default.createElement(Wrapper, { onClick: playable ? onClick : undefined, "$playable": playable },
-        playable ? (React__default.default.createElement(play_solid.PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })) : (React__default.default.createElement(lock.Lock, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" })),
-        React__default.default.createElement(Image__default.default, { alt: `thumbnail for ${title}`, height: 75, quality: 100, src: thumbnail, width: 133 }),
-        progress && duration && (React__default.default.createElement(ProgressBar, { progressPercent: progress / duration })),
-        React__default.default.createElement(box.Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
-            React__default.default.createElement(paragraph.P, { "$color": "grey-10", "$semiBold": true }, title),
-            shortDescription && (React__default.default.createElement(paragraph.P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription))),
-        duration && (React__default.default.createElement(paragraph.P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
-            React__default.default.createElement(seconds_to_duration.SecToDuration, { seconds: duration })))));
-};
-const Wrapper = styled.styled.div `
-  width: 100%;
-  flex: 0 1 auto;
-  display: flex;
-  align-items: center;
-  position: relative;
-  box-sizing: border-box;
-  cursor: pointer;
-  ${({ $playable }) => $playable ? '' : 'pointer-events: none; cursor: initial;'}
-`;
-const ProgressBar = ({ progressPercent }) => (React__default.default.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React__default.default.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
-    React__default.default.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
-const ProgressBarSvg = styled.styled.svg `
-  width: 133px;
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-`;
-
-exports.PlaylistItem = PlaylistItem;