forstok-ui-lib 1.0.15 → 1.0.17
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.
- package/dist/index.js +32 -32
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +43 -43
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/icons/arrow.svg +3 -0
- package/src/assets/images/icons/bank.svg +9 -0
- package/src/assets/images/icons/barcode.svg +34 -0
- package/src/assets/images/icons/cash.svg +9 -0
- package/src/assets/images/icons/credit.svg +9 -0
- package/src/assets/images/icons/debit.svg +9 -0
- package/src/assets/images/icons/delivery.svg +36 -0
- package/src/assets/images/icons/discount.svg +9 -0
- package/src/assets/images/icons/email.svg +9 -0
- package/src/assets/images/icons/print.svg +9 -0
- package/src/assets/images/icons/qris.svg +9 -0
- package/src/assets/images/icons/success.svg +5 -0
- package/src/assets/images/icons/wallet.svg +9 -0
- package/src/assets/images/icons/warning copy.svg +5 -0
- package/src/components/icon/icon.styles.ts +103 -10
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var e=require("react"),r=require("styled-components");function n(e){return e&&e.__esModule?e:{default:e}}var
|
|
1
|
+
"use strict";var e=require("react"),r=require("styled-components");function n(e){return e&&e.__esModule?e:{default:e}}var t=n(e),o=n(r);function a(e,r){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(e);o<t.length;o++)r.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(n[t[o]]=e[t[o]])}return n}"function"==typeof SuppressedError&&SuppressedError;var i,l={exports:{}},c={};var s,d,p={};
|
|
2
2
|
/**
|
|
3
3
|
* @license React
|
|
4
4
|
* react-jsx-runtime.development.js
|
|
@@ -7,14 +7,14 @@
|
|
|
7
7
|
*
|
|
8
8
|
* This source code is licensed under the MIT license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/function u(){return s||(s=1,"production"!==process.env.NODE_ENV&&function(){function e(r){if(null==r)return null;if("function"==typeof r)return r.$$typeof===
|
|
10
|
+
*/function u(){return s||(s=1,"production"!==process.env.NODE_ENV&&function(){function e(r){if(null==r)return null;if("function"==typeof r)return r.$$typeof===z?null:r.displayName||r.name||null;if("string"==typeof r)return r;switch(r){case j:return"Fragment";case _:return"Portal";case S:return"Profiler";case C:return"StrictMode";case L:return"Suspense";case N:return"SuspenseList"}if("object"==typeof r)switch("number"==typeof r.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case R:return(r.displayName||"Context")+".Provider";case O:return(r._context.displayName||"Context")+".Consumer";case E:var n=r.render;return(r=r.displayName)||(r=""!==(r=n.displayName||n.name||"")?"ForwardRef("+r+")":"ForwardRef"),r;case A:return null!==(n=r.displayName||null)?n:e(r.type)||"Memo";case F:n=r._payload,r=r._init;try{return e(r(n))}catch(e){}}return null}function r(e){return""+e}function n(e){try{r(e);var n=!1}catch(e){n=!0}if(n){var t=(n=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),r(e)}}function o(){}function a(e){if(void 0===K)try{throw Error()}catch(e){var r=e.stack.trim().match(/\n( *(at )?)/);K=r&&r[1]||"",q=-1<e.stack.indexOf("\n at")?" (<anonymous>)":-1<e.stack.indexOf("@")?"@unknown:0:0":""}return"\n"+K+e+q}function i(e,r){if(!e||H)return"";var n=W.get(e);if(void 0!==n)return n;H=!0,n=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var t;t=I.H,I.H=null,function(){if(0===V){b=console.log,h=console.info,m=console.warn,v=console.error,x=console.group,y=console.groupCollapsed,w=console.groupEnd;var e={configurable:!0,enumerable:!0,value:o,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}V++}();try{var i={DetermineComponentFrameRoot:function(){try{if(r){var n=function(){throw Error()};if(Object.defineProperty(n.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(n,[])}catch(e){var t=e}Reflect.construct(e,[],n)}else{try{n.call()}catch(e){t=e}e.call(n.prototype)}}else{try{throw Error()}catch(e){t=e}(n=e())&&"function"==typeof n.catch&&n.catch((function(){}))}}catch(e){if(e&&t&&"string"==typeof e.stack)return[e.stack,t.stack]}return[null,null]}};i.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var l=Object.getOwnPropertyDescriptor(i.DetermineComponentFrameRoot,"name");l&&l.configurable&&Object.defineProperty(i.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var c=i.DetermineComponentFrameRoot(),s=c[0],d=c[1];if(s&&d){var p=s.split("\n"),u=d.split("\n");for(c=l=0;l<p.length&&!p[l].includes("DetermineComponentFrameRoot");)l++;for(;c<u.length&&!u[c].includes("DetermineComponentFrameRoot");)c++;if(l===p.length||c===u.length)for(l=p.length-1,c=u.length-1;1<=l&&0<=c&&p[l]!==u[c];)c--;for(;1<=l&&0<=c;l--,c--)if(p[l]!==u[c]){if(1!==l||1!==c)do{if(l--,0>--c||p[l]!==u[c]){var f="\n"+p[l].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&W.set(e,f),f}}while(1<=l&&0<=c);break}}}finally{H=!1,I.H=t,function(){if(0==--V){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:T({},e,{value:b}),info:T({},e,{value:h}),warn:T({},e,{value:m}),error:T({},e,{value:v}),group:T({},e,{value:x}),groupCollapsed:T({},e,{value:y}),groupEnd:T({},e,{value:w})})}0>V&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=n}return p=(p=e?e.displayName||e.name:"")?a(p):"","function"==typeof e&&W.set(e,p),p}function l(e){if(null==e)return"";if("function"==typeof e){var r=e.prototype;return i(e,!(!r||!r.isReactComponent))}if("string"==typeof e)return a(e);switch(e){case L:return a("Suspense");case N:return a("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case E:return e=i(e.render,!1);case A:return l(e.type);case F:r=e._payload,e=e._init;try{return l(e(r))}catch(e){}}return""}function c(){var e=I.A;return null===e?null:e.getOwner()}function s(){var r=e(this.type);return X[r]||(X[r]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(r=this.props.ref)?r:null}function d(r,t,o,a,i,l){if("string"==typeof r||"function"==typeof r||r===j||r===S||r===C||r===L||r===N||r===D||"object"==typeof r&&null!==r&&(r.$$typeof===F||r.$$typeof===A||r.$$typeof===R||r.$$typeof===O||r.$$typeof===E||r.$$typeof===U||void 0!==r.getModuleId)){var d=t.children;if(void 0!==d)if(a)if(M(d)){for(a=0;a<d.length;a++)u(d[a],r);Object.freeze&&Object.freeze(d)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else u(d,r)}else d="",(void 0===r||"object"==typeof r&&null!==r&&0===Object.keys(r).length)&&(d+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),null===r?a="null":M(r)?a="array":void 0!==r&&r.$$typeof===$?(a="<"+(e(r.type)||"Unknown")+" />",d=" Did you accidentally export a JSX literal instead of a component?"):a=typeof r,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",a,d);if(B.call(t,"key")){d=e(r);var p=Object.keys(t).filter((function(e){return"key"!==e}));a=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",Y[d+a]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',a,d,p,d),Y[d+a]=!0)}if(d=null,void 0!==o&&(n(o),d=""+o),function(e){if(B.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(t)&&(n(t.key),d=""+t.key),"key"in t)for(var f in o={},t)"key"!==f&&(o[f]=t[f]);else o=t;return d&&function(e,r){function n(){G||(G=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}(o,"function"==typeof r?r.displayName||r.name||"Unknown":r),function(e,r,n,t,o,a){return n=a.ref,e={$$typeof:$,type:e,key:r,props:a,_owner:o},null!==(void 0!==n?n:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:s}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(r,d,l,0,c(),o)}function u(e,r){if("object"==typeof e&&e&&e.$$typeof!==J)if(M(e))for(var n=0;n<e.length;n++){var t=e[n];f(t)&&g(t,r)}else if(f(e))e._store&&(e._store.validated=1);else if(null===e||"object"!=typeof e?n=null:n="function"==typeof(n=P&&e[P]||e["@@iterator"])?n:null,"function"==typeof n&&n!==e.entries&&(n=n.call(e))!==e)for(;!(e=n.next()).done;)f(e.value)&&g(e.value,r)}function f(e){return"object"==typeof e&&null!==e&&e.$$typeof===$}function g(r,n){if(r._store&&!r._store.validated&&null==r.key&&(r._store.validated=1,n=function(r){var n="",t=c();return t&&(t=e(t.type))&&(n="\n\nCheck the render method of `"+t+"`."),n||(r=e(r))&&(n="\n\nCheck the top-level render call using <"+r+">."),n}(n),!Q[n])){Q[n]=!0;var t="";r&&null!=r._owner&&r._owner!==c()&&(t=null,"number"==typeof r._owner.tag?t=e(r._owner.type):"string"==typeof r._owner.name&&(t=r._owner.name),t=" It was passed a child from "+t+".");var o=I.getCurrentStack;I.getCurrentStack=function(){var e=l(r.type);return o&&(e+=o()||""),e},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',n,t),I.getCurrentStack=o}}var b,h,m,v,x,y,w,k=t.default,$=Symbol.for("react.transitional.element"),_=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),C=Symbol.for("react.strict_mode"),S=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),R=Symbol.for("react.context"),E=Symbol.for("react.forward_ref"),L=Symbol.for("react.suspense"),N=Symbol.for("react.suspense_list"),A=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),D=Symbol.for("react.offscreen"),P=Symbol.iterator,z=Symbol.for("react.client.reference"),I=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,T=Object.assign,U=Symbol.for("react.client.reference"),M=Array.isArray,V=0;o.__reactDisabledLog=!0;var K,q,G,H=!1,W=new("function"==typeof WeakMap?WeakMap:Map),J=Symbol.for("react.client.reference"),X={},Y={},Q={};p.Fragment=j,p.jsx=function(e,r,n,t,o){return d(e,r,n,!1,0,o)},p.jsxs=function(e,r,n,t,o){return d(e,r,n,!0,0,o)}}()),p}var f=(d||(d=1,"production"===process.env.NODE_ENV?l.exports=function(){if(i)return c;i=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(r,n,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==n.key&&(o=""+n.key),"key"in n)for(var a in t={},n)"key"!==a&&(t[a]=n[a]);else t=n;return n=t.ref,{$$typeof:e,type:r,key:o,ref:void 0!==n?n:null,props:t}}return c.Fragment=r,c.jsx=n,c.jsxs=n,c}():l.exports=u()),l.exports);const g=r.css`
|
|
11
11
|
overflow: hidden;
|
|
12
12
|
text-overflow: ellipsis;
|
|
13
13
|
white-space: nowrap;
|
|
14
14
|
display: block;
|
|
15
15
|
max-width: 100%;
|
|
16
16
|
width: auto;
|
|
17
|
-
`,
|
|
17
|
+
`,b=o.default.span`
|
|
18
18
|
display: grid;
|
|
19
19
|
i {
|
|
20
20
|
display: inline-block;
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
display: block;
|
|
35
35
|
max-width: 100%;
|
|
36
36
|
width: auto;
|
|
37
|
-
`;const
|
|
37
|
+
`;const h=r.css`
|
|
38
38
|
display: -webkit-box !important;
|
|
39
39
|
-webkit-line-clamp: 2;
|
|
40
40
|
-webkit-box-orient: vertical;
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
&:hover {
|
|
82
82
|
color: var(--pri-clr-lnk__hvr);
|
|
83
83
|
}
|
|
84
|
-
`,
|
|
84
|
+
`,v=r.css`
|
|
85
85
|
color: var(--pri-clr-lnk);
|
|
86
86
|
&,
|
|
87
87
|
&:hover {
|
|
@@ -104,24 +104,24 @@
|
|
|
104
104
|
&:hover {
|
|
105
105
|
text-decoration: none;
|
|
106
106
|
}
|
|
107
|
-
`,
|
|
108
|
-
${
|
|
109
|
-
`,k=
|
|
107
|
+
`,y=({mode:e,$elipsis:r,$activated:n,$shadow:t,disabled:o})=>{let a="";return"clear"===e?a+=m:"clearR"===e?a+=v:"blue"===e?a+="\n &, &:hover {\n color: var(--pri-clr-lnk__hvr);\n text-decoration: none;\n }\n ":"trans"===e?a+=x+"\n height: auto;\n padding: 0;\n opacity: 1;\n &, \n &:hover { \n color: var(--pri-clr-lnk__hvr);\n text-decoration: none;\n } \n &:hover {\n opacity: .9; \n }\n ":"hover"===e?a+=x+"\n height: auto;\n width: max-content;\n padding: 3px 6px;\n position: relative;\n left: -6px;\n color: initial;\n grid-gap: 4px;\n &:hover { \n border-radius: var(--ter-rd);\n box-shadow: 1px 1px var(--pri-clr-ln);\n background-color: var(--mt-clr-bg__fc);\n text-decoration: none;\n }\n ":"whiteB"===e?a+=x+"\n color: var(--ter-clr);\n background-color: var(--cl-clr-bg);\n border: 1px solid var(--sec-clr-ln);\n &, \n &:hover { \n background-color: var(--cl-clr-bg__hvr);\n } \n ":"redB"===e?a+=x+"\n color: var(--act-clr);\n background-color: var(--act-clr-bg);\n &:hover {\n background-color: var(--act-clr-bg__hvr);\n } \n ":"greyB"===e&&(a+=x+"\n color: var(--act-clr);\n background-color: var(--mt-clr-bg__fc);\n &:hover {\n background-color: var(--cl-clr-bg__hvr);\n } \n "),n&&(a+="\n color: var(--sta-clr);\n font-weight: 400;\n ","clear"!==e&&"clearR"!==e||(a+="\n color: var(--pri-clr-lnk__act);\n font-weight: 600;\n ")),r&&(a+=`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n max-width: 100%;\n width: auto;\n ${h}\n `),t&&(a+="\n box-shadow: var(--act-shd-bx);\n "),o&&(a+="\n color: #A9A9A9;\n opacity: 0.7;\n pointer-events: none;\n "),a},w=o.default.a`
|
|
108
|
+
${y}
|
|
109
|
+
`,k=o.default.span`
|
|
110
110
|
cursor:pointer;
|
|
111
|
-
${
|
|
111
|
+
${y}
|
|
112
112
|
`,$=r.css`
|
|
113
113
|
border: 0;
|
|
114
114
|
cursor: pointer;
|
|
115
115
|
font-weight: 400;
|
|
116
116
|
color: var(--sec-clr);
|
|
117
117
|
background-color: var(--act-clr-bg);
|
|
118
|
-
`,
|
|
118
|
+
`,_=o.default.input`
|
|
119
119
|
&._refQuantitiyInput {
|
|
120
120
|
width: 55px;
|
|
121
121
|
text-align: center;
|
|
122
122
|
}
|
|
123
|
-
${({width:e,height:r,$iconLeft:n,$iconRight:
|
|
124
|
-
`,
|
|
123
|
+
${({width:e,height:r,$iconLeft:n,$iconRight:t,$isError:o,mode:a,type:i})=>{let l="";return n&&(l+=" \n padding-left: 35px; \n "),t&&(l+=" \n padding-right: 35px; \n "),o&&(l+=" \n border:1px solid var(--err-clr-ln) !important; \n "),r&&(l+=` \n height: ${r}px\n max-height: ${r}px\n `),"search"===a&&(l+=' \n background-color: transparent;\n &, &:not([type="submit"]):focus, &:active, &:active:focus {\n border: 1px solid transparent !important;\n outline: none !important;\n box-shadow: none !important;\n }\n ',n&&(l+=" \n padding-left: 39px; \n ")),"transaction"===a&&(l+="\n padding-left: 45px;\n "),e&&(l+=` \n width: ${e}px \n `),"submit"===i&&(l+=$),l}}
|
|
124
|
+
`,j=r=>{var n,{mode:t,$isError:o,$iconLeft:i,$iconRight:l,reset:c,setReset:s,isForceUpdate:d,setForceUpdate:p,evChange:u,evBlur:g,isField:b,evChangeCustom:h,evEnter:m,evKeyUp:v}=r,x=a(r,["mode","$isError","$iconLeft","$iconRight","reset","setReset","isForceUpdate","setForceUpdate","evChange","evBlur","isField","evChangeCustom","evEnter","evKeyUp"]);const{type:y,name:w,defaultValue:k,defaultChecked:$}=x,j=null!==(n=null==k?void 0:k.toString())&&void 0!==n?n:"",[C,S]=e.useState(j),[O,R]=e.useState($||!1);e.useEffect((()=>{var e;if(d){const r=null!==(e=null==k?void 0:k.toString())&&void 0!==e?e:"";S(r),R($||!1),p&&p(!1)}c&&(S(""),R(!1),s&&s(!1))}),[d,p,c,s,k,$,R,t]);const E=e=>{const r=e.target.value;S(r)};let L=Object.assign({},x);delete L.defaultValue,delete L.defaultChecked;const N=f.jsx(_,Object.assign({mode:t,$isError:o,$iconLeft:i,$iconRight:l,checked:O,value:C,onChange:e=>{E(e),u&&u(e)},onBlur:e=>{E(e),(e=>{if(g&&g(e),b&&m&&m(e),b&&w){const r="number"===y?parseInt(e.target.value):e.target.value.trim();h&&h(w,r)}})(e)},onKeyUp:e=>{v&&v(e),(e=>{"Enter"===e.key&&(e.preventDefault(),b&&m&&m(e))})(e)}},"number"===y&&{onKeyPress:e=>("number"===y&&(isNaN(Number(e.key))||void 0===e.key||""===e.key)&&e.preventDefault(),!0)},"number"===y&&{onPaste:e=>{const r=(e.clipboardData||window.clipboardData).getData("text").replace(/[^0-9]/g,"");e.preventDefault(),document.execCommand("insertText",!1,r)}},"number"===y&&{onFocus:e=>e.target.addEventListener("wheel",(function(e){e.preventDefault()}),{passive:!1})},"number"===y&&{min:"0"},L));return N},C=r.css`
|
|
125
125
|
position: absolute;
|
|
126
126
|
opacity: 0;
|
|
127
127
|
cursor: pointer;
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
top: 50%;
|
|
136
136
|
margin-top: -10px;
|
|
137
137
|
}
|
|
138
|
-
`,O=
|
|
138
|
+
`,O=o.default.span`
|
|
139
139
|
position: absolute;
|
|
140
140
|
left: 0;
|
|
141
141
|
height: 14px;
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
border-radius: var(--ter-rd);
|
|
156
156
|
}
|
|
157
157
|
${({$isError:e})=>{let r="";return e&&(r+=" \n border:1px solid #fc5c64; \n "),r}}
|
|
158
|
-
`,
|
|
158
|
+
`,R=o.default.label`
|
|
159
159
|
grid-gap: 6px;
|
|
160
160
|
position: relative;
|
|
161
161
|
cursor: pointer;
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
align-items: center;
|
|
164
164
|
padding-left: 24px;
|
|
165
165
|
> input {
|
|
166
|
-
${
|
|
166
|
+
${C}
|
|
167
167
|
}
|
|
168
168
|
input:checked ~ span,
|
|
169
169
|
input.checked ~ span {
|
|
@@ -177,8 +177,8 @@
|
|
|
177
177
|
@media (min-width: 425px) {
|
|
178
178
|
padding-left: 24px;
|
|
179
179
|
}
|
|
180
|
-
${({$flow:e,$iconRight:r,disabled:n})=>{let
|
|
181
|
-
`;
|
|
180
|
+
${({$flow:e,$iconRight:r,disabled:n})=>{let t="";if(n&&(t+="\n cursor: default; \n "),"column"===e)t+="\n display: inline-grid; \n grid-auto-flow: column;\n ";else t+="\n display: grid; \n grid-auto-flow: row;\n ";return r&&(t+=S),t}}
|
|
181
|
+
`;o.default.input`
|
|
182
182
|
&:disabled {
|
|
183
183
|
cursor: default;
|
|
184
184
|
& + span {
|
|
@@ -186,11 +186,11 @@
|
|
|
186
186
|
border-color: var(--pri-clr-ln);
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
|
-
${
|
|
190
|
-
`;const
|
|
189
|
+
${C}
|
|
190
|
+
`;const E=r.css`
|
|
191
191
|
display: inline-block;
|
|
192
192
|
pointer-events: none;
|
|
193
|
-
`,
|
|
193
|
+
`,L=o.default.button`
|
|
194
194
|
> span {
|
|
195
195
|
white-space: nowrap;
|
|
196
196
|
overflow: hidden;
|
|
@@ -209,9 +209,9 @@
|
|
|
209
209
|
padding-right: 30px !important;
|
|
210
210
|
|
|
211
211
|
}
|
|
212
|
-
${({$mode:e,$isIndicatorArrow:r,$isShown:n,$isLoading:
|
|
212
|
+
${({$mode:e,$isIndicatorArrow:r,$isShown:n,$isLoading:t,$activated:o,$size:a,disabled:i,$iconLeft:l,$shadow:c})=>{let s="";return n?(c&&(s+="\n box-shadow: var(--act-shd-bx);\n "),a&&("xsmall"===a?s+="\n font-size: 12px;\n height: 20px;\n padding: 0 8px;\n ":"small"===a?s+="\n font-size: 13px;\n height: 28px;\n min-width: 75px;\n ":"medium"===a&&(s+="\n height: 32px;\n ")),"red"===e?s+=`\n color: var(--act-clr);\n background-color: var(--act-clr-bg);\n &:hover {\n background-color: var(--act-clr-bg__hvr);\n }\n & ${N} {\n fill: #ffffff;\n stroke: #ffffff;\n }\n `:"white"===e?s+="\n color: var(--mt-clr);\n background-color: var(--cl-clr-bg);\n border: 1px solid var(--sec-clr-ln);\n &:hover { \n background-color: var(--cl-clr-bg__hvr);\n } \n ":"blue"===e?s+=`\n &, &:hover {\n background-color: var(--ck-clr-bg__act);\n color: var(--act-clr);\n }\n & ${N} {\n fill: #ffffff;\n stroke: #ffffff;\n }\n `:"nude"===e?s+="\n &, &:hover { \n background-color: var(--ter-clr-bg); \n } \n ":"clearL"===e?s+="\n width: auto;\n height: auto;\n color: var(--pri-clr-lnk__hvr);\n text-decoration: none;\n padding: 0;\n margin: 0;\n &, &:hover { \n background-color: transparent; \n }\n &:hover {\n opacity: .9;\n }\n ":"clearB"===e?s+=`\n background-color: var(--cl-clr-bg);\n color: var(--pri-clr-lnk__hvr);\n svg {\n fill: var(--pri-clr-lnk__hvr);\n stroke: var(--pri-clr-lnk__hvr);\n }\n & ${N} {\n width: 14px;\n height: 14px;\n margin-top: -7px;\n }\n &:disabled {\n span {color: var(--mt-clr);}\n }\n `:"clear"===e?(s+="\n box-shadow: none !important;\n &, &:hover { \n background-color: transparent; \n }\n ",o&&(s+="\n color: var(--pri-clr) !important;\n font-weight: 600;\n ")):"more"===e?s+=`\n padding: 8px;\n background-color: var(--mt-clr-bg__fc);\n &:before { \n content: url(data:image/svg+xml,%3csvg width='3' height='13' viewBox='0 0 3 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='1.5' cy='1.5' r='1.5' fill='%235A5A5A'/%3e%3ccircle cx='1.5' cy='6.5' r='1.5' fill='%235A5A5A'/%3e%3ccircle cx='1.5' cy='11.5' r='1.5' fill='%235A5A5A'/%3e%3c/svg%3e);\n height: 14px;\n width: 14px;\n ${E}\n }\n `:"round-close"===e?s+=`\n background-color: transparent;\n &:before { \n content: url(data:image/svg+xml,%3c%3fxml version='1.0' encoding='iso-8859-1'%3f%3e%3c!-- Generator: Adobe Illustrator 18.1.1%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 212.982 212.982' style='enable-background:new 0 0 212.982 212.982%3b fill: rgb(72%2c72%2c72)' xml:space='preserve'%3e %3cpath style='fill-rule:evenodd%3bclip-rule:evenodd%3b' d='M131.804%2c106.491l75.936-75.936c6.99-6.99%2c6.99-18.323%2c0-25.312 c-6.99-6.99-18.322-6.99-25.312%2c0l-75.937%2c75.937L30.554%2c5.242c-6.99-6.99-18.322-6.99-25.312%2c0c-6.989%2c6.99-6.989%2c18.323%2c0%2c25.312 l75.937%2c75.936L5.242%2c182.427c-6.989%2c6.99-6.989%2c18.323%2c0%2c25.312c6.99%2c6.99%2c18.322%2c6.99%2c25.312%2c0l75.937-75.937l75.937%2c75.937 c6.989%2c6.99%2c18.322%2c6.99%2c25.312%2c0c6.99-6.99%2c6.99-18.322%2c0-25.312L131.804%2c106.491z'/%3e%3c/svg%3e);\n width: 12px;\n ${E}\n } \n `:"small-white-round-close"===e?s+=`\n background-color: transparent;\n &:before { \n content: url(data:image/svg+xml,%3c%3fxml version='1.0' encoding='iso-8859-1'%3f%3e%3c!-- Generator: Adobe Illustrator 18.1.1%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 212.982 212.982' style='enable-background:new 0 0 212.982 212.982%3b fill: white' xml:space='preserve'%3e %3cpath style='fill-rule:evenodd%3bclip-rule:evenodd%3b' d='M131.804%2c106.491l75.936-75.936c6.99-6.99%2c6.99-18.323%2c0-25.312 c-6.99-6.99-18.322-6.99-25.312%2c0l-75.937%2c75.937L30.554%2c5.242c-6.99-6.99-18.322-6.99-25.312%2c0c-6.989%2c6.99-6.989%2c18.323%2c0%2c25.312 l75.937%2c75.936L5.242%2c182.427c-6.989%2c6.99-6.989%2c18.323%2c0%2c25.312c6.99%2c6.99%2c18.322%2c6.99%2c25.312%2c0l75.937-75.937l75.937%2c75.937 c6.989%2c6.99%2c18.322%2c6.99%2c25.312%2c0c6.99-6.99%2c6.99-18.322%2c0-25.312L131.804%2c106.491z'/%3e%3c/svg%3e);\n width: 8px;\n ${E}\n } \n `:"page-option"===e&&(s+=`\n border: 1px solid var(--ck-clr-ln);\n background-color: transparent;\n font-weight: 600;\n cursor: pointer;\n border-radius: var(--ter-rd);\n padding: 6px 12px;\n height: 28px;\n & ${N} {\n width: 14px;\n height: 14px;\n margin-top: -7px;\n }\n `),i&&(s+="\n &, &:hover {\n background-color: var(--mt-clr-bg__fc) !important;\n cursor: default;\n color: var(--mt-clr);\n }\n "),l&&(s+=" padding-left: 35px; "),r&&(s+=" \n padding-right: 25px; \n "),t&&(s+=" \n padding-right: 30px !important; \n "),s):"display:none;"}}
|
|
213
213
|
|
|
214
|
-
`,
|
|
214
|
+
`,N=o.default.svg`
|
|
215
215
|
display: inline-block;
|
|
216
216
|
fill: currentColor;
|
|
217
217
|
stroke: currentColor;
|
|
@@ -224,19 +224,19 @@
|
|
|
224
224
|
height: 14px;
|
|
225
225
|
margin-top: -7px;
|
|
226
226
|
${({color:e})=>{let r="";return e&&"initial"!==e&&(r+=`\n fill: ${e};\n stroke: ${e};\n `),r}}
|
|
227
|
-
`,
|
|
227
|
+
`,A=r.css`
|
|
228
228
|
display: block;
|
|
229
229
|
margin: 8px 0;
|
|
230
|
-
`,
|
|
230
|
+
`,F=r.css`
|
|
231
231
|
display: block;
|
|
232
232
|
text-align: center;
|
|
233
233
|
align-items: center;
|
|
234
234
|
margin: 30px;
|
|
235
235
|
color: var(--mt-clr);
|
|
236
236
|
font-size: 14px;
|
|
237
|
-
`,
|
|
238
|
-
${({$mode:e,$position:r})=>{let n="";return"block"===e?n+=
|
|
239
|
-
`,
|
|
237
|
+
`,D=o.default.span`
|
|
238
|
+
${({$mode:e,$position:r})=>{let n="";return"block"===e?n+=A:"empty"===e?n+=F:"indi"===e&&(n+='\n padding: 20px 0;\n text-align: left;\n display: block;\n color: var(--mt-clr);\n &[aria-label="error"] {\n color: var(--err-clr);\n }\n '),r&&("left"===r?n+="\n text-align: left;\n align-items: left;\n margin-left: 15px;\n ":"right"===r&&(n+="\n text-align: right;\n align-items: right;\n margin-right: 15px;\n ")),n}}
|
|
239
|
+
`,P=o.default.div`
|
|
240
240
|
@keyframes load8 {
|
|
241
241
|
0% {
|
|
242
242
|
-webkit-transform: rotate(0deg);
|
|
@@ -260,8 +260,8 @@
|
|
|
260
260
|
&.is-hidden {
|
|
261
261
|
display: none;
|
|
262
262
|
}
|
|
263
|
-
${({$mode:e,$position:r,$color:n})=>{let
|
|
264
|
-
`,
|
|
263
|
+
${({$mode:e,$position:r,$color:n})=>{let t="";switch(e){case"small":t+=`\n border-top: 2px solid ${n||"var(--err-clr-ln)"};\n border-right: 2px solid ${n||"var(--err-clr-ln)"};\n border-bottom: 2px solid ${n||"var(--err-clr-ln)"};\n border-left: 2px solid transparent;\n &, \n &:after {\n width: 12px;\n height: 12px;\n }\n `;break;case"smallclear":t+=`\n border-top: 2px solid ${n||"var(--err-clr-ln)"};\n border-right: 2px solid ${n||"var(--err-clr-ln)"};\n border-bottom: 2px solid ${n||"var(--err-clr-ln)"};\n border-left: 2px solid transparent;\n margin: 0;\n &, \n &:after {\n width: 12px;\n height: 12px;\n }\n `;break;case"medium":t+=`\n border-top: 3px solid ${n||"var(--err-clr-ln)"};\n border-right: 3px solid ${n||"var(--err-clr-ln)"};\n border-bottom: 3px solid ${n||"var(--err-clr-ln)"};\n border-left: 3px solid transparent;\n &, \n &:after {\n width: 20px;\n height: 20px;\n }\n `;break;case"mediumclear":t+=`\n border-top: 3px solid ${n||"var(--err-clr-ln)"};\n border-right: 3px solid ${n||"var(--err-clr-ln)"};\n border-bottom: 3px solid ${n||"var(--err-clr-ln)"};\n border-left: 3px solid transparent;\n margin: 20px;\n &, \n &:after {\n width: 20px;\n height: 20px;\n }\n `;break;case"large":t+=`\n border-top: 4px solid ${n||"var(--err-clr-ln)"};\n border-right: 4px solid ${n||"var(--err-clr-ln)"};\n border-bottom: 4px solid ${n||"var(--err-clr-ln)"};\n border-left: 4px solid transparent;\n &, \n &:after {\n width: 25px;\n height: 25px;\n }\n `}return"left"===r&&(t+="\n margin-left: 0;\n margin-right: 0;\n "),t}}
|
|
264
|
+
`,z=o.default.div`
|
|
265
265
|
@keyframes sk-bouncedelay {
|
|
266
266
|
0%, 80%, 100% {
|
|
267
267
|
-webkit-transform: scale(0);
|
|
@@ -298,11 +298,11 @@
|
|
|
298
298
|
background-color: ${e};
|
|
299
299
|
}
|
|
300
300
|
`}}
|
|
301
|
-
`,I=e=>{var{$mode:r,$position:n,$shape:
|
|
301
|
+
`,I=e=>{var{$mode:r,$position:n,$shape:t,$color:o,$extendClass:i}=e,l=a(e,["$mode","$position","$shape","$color","$extendClass"]);const c=`${l.className||""} ${i||""}`;return"dot"===t?f.jsxs(z,Object.assign({className:c,$color:o},l,{children:[f.jsx("div",{}),f.jsx("div",{}),f.jsx("div",{})]})):f.jsx(P,Object.assign({className:c,$mode:r,$color:o,$position:n},l))},B=o.default.i`
|
|
302
302
|
display: inline-block;
|
|
303
303
|
&:before {
|
|
304
304
|
display: grid;
|
|
305
305
|
}
|
|
306
|
-
${({$mode:e,$name:r,$width:n,onClick:
|
|
307
|
-
`;exports.ButtonComponent=e=>{var{children:r,$mode:n,$isIndicatorArrow:
|
|
306
|
+
${({$mode:e,$name:r,$width:n,onClick:t})=>{let o="";switch(r){case"search":o+="\n &:before { \n content: url('../../assets/images/icons/search.svg'); \n }\n ";break;case"check":o+="\n &:before { \n content: url('../../assets/images/icons/checkmark-tick.svg'); \n }\n ";break;case"check-grey":o+="\n &:before { \n content: url('../../assets/images/icons/checkmark-tick-grey.svg'); \n }\n ";break;case"arrow-left-blue":o+="\n &:before { \n content: url('../../assets/images/icons/arrow-left-blue.svg'); \n }\n ";break;case"edit":o+="\n &:before { \n content: url('../../assets/images/icons/edit.svg); \n }\n ";break;case"arrow":o+="\n &:before { \n content: url('../../assets/images/icons/arrow.svg'); \n }\n ";break;case"discount":o+="\n &:before { \n content: url('../../assets/images/icons/discount.svg'); \n }\n ";break;case"cash":o+="\n &:before { \n content: url('../../assets/images/icons/cash.svg'); \n }\n ";break;case"credit":o+="\n &:before { \n content: url('../../assets/images/icons/credit.svg'); \n }\n ";break;case"debit":o+="\n &:before { \n content: url('../../assets/images/icons/debit.svg'); \n }\n ";break;case"bank":o+="\n &:before { \n content: url('../../assets/images/icons/bank.svg'); \n }\n ";break;case"qris":o+="\n &:before { \n content: url('../../assets/images/icons/qris.svg'); \n }\n ";break;case"wallet":o+="\n &:before { \n content: url('../../assets/images/icons/wallet.svg'); \n }\n ";break;case"delivery":o+="\n &:before { \n content: url('../../assets/images/icons/delivery.svg'); \n }\n ";break;case"success":o+="\n &:before { \n content: url('../../assets/images/icons/success.svg'); \n }\n ";break;case"email":o+="\n &:before { \n content: url('../../assets/images/icons/email.svg'); \n }\n ";break;case"print":o+="\n &:before { \n content: url('../../assets/images/icons/print.svg'); \n }\n ";break;case"warning":o+="\n &:before { \n content: url('../../assets/images/icons/warning.svg'); \n }\n ";break;case"barcode":o+="\n &:before { \n content: url('../../assets/images/icons/barcode.svg'); \n }\n "}return n&&(o+=`\n &:before { \n width: ${n}; \n height: ${n};\n }\n `),t&&(o+="\n cursor: pointer;\n "),"filter"===e?o+="\n position: relative;\n ":"disabled"===e&&(o+="\n &, \n &:before {\n opacity: .7;\n }\n "),o}}
|
|
307
|
+
`;exports.ButtonComponent=e=>{var{children:r,$mode:n,$isIndicatorArrow:t=!1,isIndicatorArrowColor:o="initial",$isShown:i=!0,$shadow:l=!1,$isLoading:c=!1,refContainer:s,$activated:d=!1,$size:p,$iconLeft:u}=e,g=a(e,["children","$mode","$isIndicatorArrow","isIndicatorArrowColor","$isShown","$shadow","$isLoading","refContainer","$activated","$size","$iconLeft"]);const{disabled:b}=g,h=t?f.jsx(N,{color:o,height:"20",width:"20",viewBox:"0 0 20 20","aria-hidden":"true",focusable:"false",children:f.jsx("path",{d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"})}):null;return f.jsxs(L,Object.assign({$mode:n,$isIndicatorArrow:!!t,$isShown:!!i,$shadow:!!l,disabled:b||c||!1,$isLoading:!!c,ref:s,$activated:!!d,$size:p,$iconLeft:u},g,{children:[r,h]}))},exports.CheckboxComponent=r=>{var{id:n,name:t,children:o,$flow:i,extendKey:l,extendClass:c,reset:s,setReset:d,isForceUpdate:p,setForceUpdate:u,evChange:g,$isError:b,$iconRight:h}=r,m=a(r,["id","name","children","$flow","extendKey","extendClass","reset","setReset","isForceUpdate","setForceUpdate","evChange","$isError","$iconRight"]);const{disabled:v,defaultChecked:x}=m,[y,w]=e.useState(x||!1),k=e.useRef(null);e.useEffect((()=>{p&&(w(x||!1),u&&u(!1)),s&&(w(!1),d&&d(!1))}),[s,d,p,u,x]);return delete Object.assign({},m).defaultChecked,f.jsxs(R,{$flow:i,$iconRight:h,ref:k,htmlFor:n,disabled:v||!1,children:[o,f.jsx(j,Object.assign({id:n,type:"checkbox",checked:y,name:t,evChange:e=>{w(e.target.checked),g&&g(e)}},c&&{className:c},""!==l&&{"data-key":l},m)),f.jsx(O,Object.assign({$isError:b},m["data-qa-id"]&&{"data-qa-id":m["data-qa-id"]}))]})},exports.IconComponent=e=>{var{$width:r,$name:n,$mode:t,onClick:o,$isLoading:i=!1}=e,l=a(e,["$width","$name","$mode","onClick","$isLoading"]);return i?f.jsx(I,{$mode:"small",$position:"center",$shape:"dot",$color:"#fc5c64"}):f.jsx(B,Object.assign({$mode:t,$name:n,$width:r,onClick:o},l))},exports.InputComponent=j,exports.LabelComponent=e=>{var{children:r,$mode:n,$position:t}=e,o=a(e,["children","$mode","$position"]);return f.jsx(D,Object.assign({$mode:n,$position:t},o,{children:r}))},exports.LinkComponent=e=>{var{children:r,mode:n,$activated:t=!1,href:o,$elipsis:i=!1,$shadow:l=!1,disabled:c=!1}=e,s=a(e,["children","mode","$activated","href","$elipsis","$shadow","disabled"]);const{onClick:d}=s;return o?f.jsx(w,Object.assign({className:"_refLink",mode:n,$activated:t,$elipsis:i,$shadow:l,disabled:c,href:o},s,{children:r})):f.jsx(k,Object.assign({className:"_refLink",mode:n,$activated:t,$elipsis:i,$shadow:l,disabled:c,onClick:d},s,{children:r}))},exports.LoadingComponent=I,exports.TextComponent=e=>{var{children:r,$color:n,$elipsis:t=!0}=e,o=a(e,["children","$color","$elipsis"]);return f.jsx(b,Object.assign({$elipsis:!!t,$color:n},o,{children:r}))};
|
|
308
308
|
//# sourceMappingURL=index.js.map
|