@soul-refiner/design-system 2.4.13 → 2.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/feedback/banner/banner.js +1 -1
  2. package/dist/components/input/text_input/text_input.js +5 -6
  3. package/dist/src/components/input/text_input/text_input.d.ts +2 -1
  4. package/package.json +1 -1
package/dist/components/feedback/banner/banner.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- "use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),alert_circle=require("../../../icons/notifications/alert_circle.js"),alert_octogon=require("../../../icons/notifications/alert_octogon.js"),alert_triangle=require("../../../icons/notifications/alert_triangle.js"),close=require("../../../icons/basic/close.js"),information=require("../../../icons/notifications/information.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Banner=({content:e,href:t,onClose:r,title:a,type:o,setContentInNewLine:l=!1,additionalContent:n,sx:i})=>{var c={error:React__default.default.createElement(alert_octogon.AlertOctogon,{size:24}),info:React__default.default.createElement(information.Information,{size:24}),success:React__default.default.createElement(alert_circle.AlertCircle,{size:24}),warning:React__default.default.createElement(alert_triangle.AlertTriangle,{size:24})};return React__default.default.createElement(Wrapper,{as:"output",$dir:"row",$gap:8,$type:o,$sx:i},c[o],React__default.default.createElement(box.Box,{$dir:l?"column":"row",$gap:4},React__default.default.createElement(paragraph.P,{as:"span",$semiBold:!0},a),React__default.default.createElement(paragraph.P,{as:"span",sx:l?"margin-top: 12px;":""},e),n&&React__default.default.createElement(paragraph.P,{as:"span"},n),t&&React__default.default.createElement(paragraph.P,{as:"a",href:t,$color:"primary-blue-2"},"Read more")),r&&React__default.default.createElement(button.Button,{icon:React__default.default.createElement(close.Close,{size:24}),onClick:r,type:"special"}))},Wrapper=styled.styled.output`
2
+ "use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),alert_circle=require("../../../icons/notifications/alert_circle.js"),alert_octogon=require("../../../icons/notifications/alert_octogon.js"),alert_triangle=require("../../../icons/notifications/alert_triangle.js"),close=require("../../../icons/basic/close.js"),information=require("../../../icons/notifications/information.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Banner=({content:e,href:t,onClose:r,title:a,type:o,setContentInNewLine:l=!1,additionalContent:n,sx:i})=>{var c={error:React__default.default.createElement(alert_octogon.AlertOctogon,{size:24}),info:React__default.default.createElement(information.Information,{size:24}),success:React__default.default.createElement(alert_circle.AlertCircle,{size:24}),warning:React__default.default.createElement(alert_triangle.AlertTriangle,{size:24})};return React__default.default.createElement(Wrapper,{as:"output",$dir:"row",$gap:8,$type:o,$sx:i},c[o],React__default.default.createElement(box.Box,{$dir:l?"column":"row",sx:"width: 100%; flex-wrap: wrap;",$gap:4},React__default.default.createElement(paragraph.P,{as:"span",$semiBold:!0},a),React__default.default.createElement(paragraph.P,{as:"span",sx:l?"margin-top: 12px;":""},e),n&&React__default.default.createElement(paragraph.P,{as:"span"},n),t&&React__default.default.createElement(paragraph.P,{as:"a",href:t,$color:"primary-blue-2"},"Read more")),r&&React__default.default.createElement(button.Button,{icon:React__default.default.createElement(close.Close,{size:24}),onClick:r,type:"special"}))},Wrapper=styled.styled.output`
3
3
  width: 100%;
4
4
  box-sizing: border-box;
5
5
  padding: 12px 16px;
package/dist/components/input/text_input/text_input.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- "use strict";var React=require("react"),styled=require("styled-components"),chip=require("../../feedback/chip/chip.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextInput=({bg:e="var(--color-blue-10)",disabled:r,helperText:t,icon:l,inputSx:a,label:o,maxCharacters:n,multiple:c,name:i,onChange:s,onClick:u,onFocus:d,onKeyDown:p,onBlur:f,onMultipleChange:m,placeholder:g,placeIconAtTheEnd:$=!1,size:y="large",successful:b,sx:_,type:h="text",value:x,variant:v="default",warning:k})=>{const z=React__default.default.useId();const[w,C]=React__default.default.useState("");return React__default.default.createElement(Label,{$disabled:r,$size:y,$sx:_},React__default.default.createElement(Legend,{$bg:e,$size:y,$successful:b,$warning:k,$variant:v},o),React__default.default.createElement(InputWrapper,{$bg:e,$size:y,$successful:b,$warning:k},!$&&l,c?React__default.default.createElement(MultipleInputWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault();e=x.includes(w);m&&!e&&m([...x,w]),C("")}},x.filter(Boolean).map((e,r)=>React__default.default.createElement(chip.Chip,{key:z+e+r,color:"blue",size:"small",onDismiss:()=>{var r;r=e,m&&m(x.filter(e=>e!==r))}},e)),React__default.default.createElement(Input,{$size:y,$sx:a,onBlur:f,onChange:e=>{C(e.target.value)},onClick:u,onFocus:d,onKeyDown:e=>{!x.length||!m||w||"Delete"!==e.key&&"Backspace"!==e.key||m(x.slice(0,x.length-1))},value:w})):React__default.default.createElement(Input,{$size:y,$sx:a,disabled:r,name:i,..."number"===h&&{min:0},onBlur:f,onChange:s,onClick:u,onFocus:d,onKeyDown:p,placeholder:g,type:h,value:"number"!==h&&n?x?.slice(0,n-1)||"":x}),n&&"number"!==h&&!$&&React__default.default.createElement(MaxCharactersText,{$size:y},x?.length||0," / ",n),$&&l,b&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),k&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),t&&React__default.default.createElement(HelperText,{$size:y,$warning:k},k&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"}),t))},Label=styled.styled.label`
2
+ "use strict";var React=require("react"),styled=require("styled-components"),chip=require("../../feedback/chip/chip.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextInput=({bg:e="var(--color-blue-10)",disabled:t,helperText:r,icon:l,inputSx:a,label:o,maxCharacters:n,multiple:i,name:c,onChange:s,onClick:u,onFocus:d,onKeyDown:p,onBlur:f,onMultipleChange:m,placeholder:g,hasOutline:$=!0,placeIconAtTheEnd:y=!1,size:h="large",successful:b,sx:x,type:_="text",value:v,variant:k="default",warning:z})=>{const w=React__default.default.useId();const[C,R]=React__default.default.useState("");return React__default.default.createElement(Label,{$disabled:t,$size:h,$sx:x},React__default.default.createElement(Legend,{$bg:e,$size:h,$successful:b,$warning:z,$variant:k},o),React__default.default.createElement(InputWrapper,{$bg:e,$size:h,$successful:b,$hasOutline:$,$warning:z},!y&&l,i?React__default.default.createElement(MultipleInputWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault();e=v.includes(C);m&&!e&&m([...v,C]),R("")}},v.filter(Boolean).map((e,t)=>React__default.default.createElement(chip.Chip,{key:w+e+t,color:"blue",size:"small",onDismiss:()=>{var t;t=e,m&&m(v.filter(e=>e!==t))}},e)),React__default.default.createElement(Input,{$size:h,$sx:a,onBlur:f,onChange:e=>{R(e.target.value)},onClick:u,onFocus:d,onKeyDown:e=>{!v.length||!m||C||"Delete"!==e.key&&"Backspace"!==e.key||m(v.slice(0,v.length-1))},value:C})):React__default.default.createElement(Input,{$size:h,$sx:a,disabled:t,name:c,..."number"===_&&{min:0},onBlur:f,onChange:s,onClick:u,onFocus:d,onKeyDown:p,placeholder:g,type:_,value:"number"!==_&&n?v?.slice(0,n-1)||"":v}),n&&"number"!==_&&!y&&React__default.default.createElement(MaxCharactersText,{$size:h},v?.length||0," / ",n),y&&l,b&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),z&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),r&&React__default.default.createElement(HelperText,{$size:h,$warning:z},z&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"}),r))},Label=styled.styled.label`
3
3
  font-family: var(--font-inter);
4
4
  font-size: ${({$size:e})=>"small"===e?.75:.87}rem;
5
5
  font-weight: 400;
@@ -27,9 +27,9 @@
27
27
  width: fit-content;
28
28
  ${({$successful:e})=>e&&"color: var(--color-green-3) !important;"}
29
29
  ${({$warning:e})=>e&&"color: var(--color-red-4) !important;"}
30
- ${({$variant:e,$bg:r})=>"adaptive"===e&&`
31
- background: ${r};
32
- background: linear-gradient(0deg, ${r} 0%, rgba(255,255,255,1) 100%);
30
+ ${({$variant:e,$bg:t})=>"adaptive"===e&&`
31
+ background: ${t};
32
+ background: linear-gradient(0deg, ${t} 0%, rgba(255,255,255,1) 100%);
33
33
  left: .5rem;
34
34
  padding: 0 .25rem;
35
35
  position: relative;
@@ -39,12 +39,11 @@
39
39
  align-items: center;
40
40
  background-color: ${({$bg:e})=>e};
41
41
  border-radius: 0.25rem;
42
- border: 1px solid var(--color-grey-8);
43
42
  box-sizing: border-box;
44
43
  display: flex;
45
44
  gap: 0.5rem;
46
45
  padding: ${({$size:e})=>"small"===e?".5rem .75rem":".75rem"};
47
-
46
+ border: ${({$hasOutline:e})=>e?"1px solid var(--color-grey-8);":"1px solid transparent;"};
48
47
  &:focus-within {
49
48
  border-color: var(--color-primary-blue-2);
50
49
  }
package/dist/src/components/input/text_input/text_input.d.ts CHANGED
@@ -9,6 +9,7 @@ export type Props = {
9
9
  icon?: React.ReactElement;
10
10
  helperText?: string;
11
11
  label?: string;
12
+ hasOutline?: boolean;
12
13
  maxCharacters?: number;
13
14
  multiple?: boolean;
14
15
  name?: string;
@@ -44,5 +45,5 @@ interface WarningProps extends Props {
44
45
  warning?: true;
45
46
  }
46
47
  export type TextInputProps = DisabledProps | SuccessfulProps | WarningProps;
47
- export declare const TextInput: ({ bg, disabled, helperText, icon, inputSx, label, maxCharacters, multiple, name, onChange, onClick, onFocus, onKeyDown, onBlur, onMultipleChange, placeholder, placeIconAtTheEnd, size, successful, sx, type, value, variant, warning, }: TextInputProps) => React.JSX.Element;
48
+ export declare const TextInput: ({ bg, disabled, helperText, icon, inputSx, label, maxCharacters, multiple, name, onChange, onClick, onFocus, onKeyDown, onBlur, onMultipleChange, placeholder, hasOutline, placeIconAtTheEnd, size, successful, sx, type, value, variant, warning, }: TextInputProps) => React.JSX.Element;
48
49
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soul-refiner/design-system",
3
- "version": "2.4.13",
3
+ "version": "2.4.15",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/src/index.d.ts",
6
6
  "license": "MIT",