@feminab/box-ui 0.1.0

package/storybook-static/stories-TextInput-stories.6d3e15c6.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[550],{"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/TextInput.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{k:()=>TextInput});var react=__webpack_require__("./node_modules/react/index.js"),Typography=__webpack_require__("./src/Typography.tsx"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames);var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const TextInput=_ref=>{let{type,value,label,placeholder,error,helperText,disabled,LeadingIcon,TrailingIcon,leadingText,handleChange}=_ref;const{setClassName}={setClassName:(icon,additionalClass)=>(0,react.isValidElement)(icon)?(0,react.cloneElement)(icon,{className:classnames_default()(icon.props.className,additionalClass)}):icon};return(0,jsx_runtime.jsxs)("div",{children:[label&&(0,jsx_runtime.jsx)(Typography.o,{variant:"sm",customWeight:"medium",customColor:"text-gray-700 dark:text-white",className:"mb-1.5",children:label}),(0,jsx_runtime.jsxs)("div",{className:classnames_default()("relative",{"flex items-center":leadingText}),children:[(0,jsx_runtime.jsxs)("div",{className:"h-11 absolute shadow-sm rounded-lg w-full flex justify-between items-center px-3.5 pointer-events-none",children:[LeadingIcon?setClassName(LeadingIcon,"text-gray-500"):(0,jsx_runtime.jsx)("div",{}),TrailingIcon&&setClassName(TrailingIcon,classnames_default()({"text-error-500":error,"text-gray-400":!error}))]}),leadingText&&(0,jsx_runtime.jsx)(Typography.o,{variant:"sm",customWeight:"regular",className:classnames_default()("flex items-center h-11 text-lg text-gray-500 pl-3.5 pr-3 border border-r-0 rounded-l-lg border-gray-300 dark:border-gray-500",{"bg-gray-50 dark:bg-gray-700":disabled,"dark:bg-gray-800":!disabled}),children:leadingText}),(0,jsx_runtime.jsx)("input",{type,value,placeholder,onChange:handleChange,disabled,className:classnames_default()("w-full select-none text-gray-900 dark:text-white text-md border h-11 px-2",{"pl-9":LeadingIcon,"pr-9":TrailingIcon,"rounded-l-0 rounded-r-lg":leadingText,"rounded-lg":!leadingText,"border-gray-300 dark:border-gray-500 focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20":!error,"border-error-300 focus:ring-4 focus:border-error-300 focus:ring-error-100":error,"bg-white dark:bg-gray-800":!disabled,"bg-gray-50 dark:bg-gray-700":disabled})})]}),error&&(0,jsx_runtime.jsx)(Typography.o,{variant:"sm",customWeight:"regular",className:"mt-1.5 text-error-500",children:error}),helperText&&(0,jsx_runtime.jsx)(Typography.o,{variant:"sm",customWeight:"regular",className:"mt-1.5 text-gray-500",children:helperText})]})};TextInput.__docgenInfo={description:"",methods:[],displayName:"TextInput",props:{type:{required:!0,tsType:{name:"union",raw:'"email" | "text"',elements:[{name:"literal",value:'"email"'},{name:"literal",value:'"text"'}]},description:""},value:{required:!0,tsType:{name:"string"},description:""},placeholder:{required:!0,tsType:{name:"string"},description:""},error:{required:!1,tsType:{name:"string"},description:""},label:{required:!1,tsType:{name:"string"},description:""},helperText:{required:!1,tsType:{name:"string"},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},leadingText:{required:!1,tsType:{name:"string"},description:""},LeadingIcon:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},TrailingIcon:{required:!1,tsType:{name:"ReactReactElement",raw:"React.ReactElement"},description:""},handleChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.ChangeEvent<HTMLInputElement>) => void",signature:{arguments:[{type:{name:"ReactChangeEvent",raw:"React.ChangeEvent<HTMLInputElement>",elements:[{name:"HTMLInputElement"}]},name:"event"}],return:{name:"void"}}},description:""}}}},"./src/Typography.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{o:()=>Typography});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const TypographyVariantClasses={xs:"text-xs",sm:"text-sm",md:"text-md",lg:"text-lg",xl:"text-xl",h6:"text-h6",h5:"text-h5",h4:"text-h4",h3:"text-h3",h2:"text-h2",h1:"text-h1"},TypographyWeightClasses={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},Typography=_ref=>{let{variant="md",customWeight="regular",customColor,className,children}=_ref;const TypographyVariantClassName=TypographyVariantClasses[variant],TypographyWeightClassName=TypographyWeightClasses[customWeight],Component=["h1","h2","h3","h4","h5","h6"].includes(null!=variant?variant:"p")?variant:"p";return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(TypographyVariantClassName,TypographyWeightClassName,className,{"tracking-tight":["h1","h2","h3"].includes(variant),"text-black dark:text-white":!customColor},customColor),children})};Typography.__docgenInfo={description:"",methods:[],displayName:"Typography",props:{variant:{required:!1,tsType:{name:"union",raw:'| "xs"\n| "sm"\n| "md"\n| "lg"\n| "xl"\n| "h6"\n| "h5"\n| "h4"\n| "h3"\n| "h2"\n| "h1"',elements:[{name:"literal",value:'"xs"'},{name:"literal",value:'"sm"'},{name:"literal",value:'"md"'},{name:"literal",value:'"lg"'},{name:"literal",value:'"xl"'},{name:"literal",value:'"h6"'},{name:"literal",value:'"h5"'},{name:"literal",value:'"h4"'},{name:"literal",value:'"h3"'},{name:"literal",value:'"h2"'},{name:"literal",value:'"h1"'}]},description:"",defaultValue:{value:'"md"',computed:!1}},customWeight:{required:!1,tsType:{name:"union",raw:'"regular" | "medium" | "semibold" | "bold"',elements:[{name:"literal",value:'"regular"'},{name:"literal",value:'"medium"'},{name:"literal",value:'"semibold"'},{name:"literal",value:'"bold"'}]},description:"",defaultValue:{value:'"regular"',computed:!1}},customColor:{required:!1,tsType:{name:"string"},description:""},customClass:{required:!1,tsType:{name:"string"},description:""},className:{required:!1,tsType:{name:"string"},description:""},children:{required:!0,tsType:{name:"union",raw:"string | React.ReactNode",elements:[{name:"string"},{name:"ReactReactNode",raw:"React.ReactNode"}]},description:""}}}},"./src/stories/TextInput.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,LeadingTextInput:()=>LeadingTextInput,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_TextInput__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/TextInput.tsx"),_StoryLayout__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/StoryLayout.tsx"),react_icons_fi__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/react-icons/fi/index.mjs"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Example/TextInput",component:_TextInput__WEBPACK_IMPORTED_MODULE_1__.k},Default={args:{darkMode:!1},render:args=>{const[text1,setText1]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(args.value),handleChange=e=>{setText1(e.target.value)};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_1__.k,{type:"email",value:text1,handleChange,label:"Email",placeholder:"veronica@example.com",helperText:"This is a hint text to help the user.",LeadingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.pHD,{}),TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.lrG,{}),disabled:args.disabled}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{className:"mb-4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_1__.k,{type:"email",value:text1,handleChange,label:"Email",placeholder:"veronica@example.com",helperText:"This is a hint text to help the user.",error:"This is an error message.",LeadingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.pHD,{}),TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.lrG,{}),disabled:args.disabled})]})}},LeadingTextInput={args:{darkMode:!1},render:args=>{const[text1,setText1]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(args.value),handleChange=e=>{setText1(e.target.value)};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_1__.k,{type:"text",value:text1,handleChange,label:"Website",placeholder:"example.com",leadingText:"https://",helperText:"This is a hint text to help the user.",TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.lrG,{}),disabled:args.disabled}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{className:"mb-4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_TextInput__WEBPACK_IMPORTED_MODULE_1__.k,{type:"text",value:text1,handleChange,label:"Website",placeholder:"example.com",leadingText:"https://",error:"This is an error message.",TrailingIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_icons_fi__WEBPACK_IMPORTED_MODULE_4__.y3G,{}),disabled:args.disabled})]})}},__namedExportsOrder=["Default","LeadingTextInput"];Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false\n  },\n  render: args => {\n    const [text1, setText1] = useState<string>(args.value);\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setText1(e.target.value);\n    };\n    return <StoryLayout {...args}>\n        <TextInput type="email" value={text1} handleChange={handleChange} label="Email" placeholder="veronica@example.com" helperText="This is a hint text to help the user." LeadingIcon={<FiMail />} TrailingIcon={<FiHelpCircle />} disabled={args.disabled} />\n        <div className="mb-4" />\n        <TextInput type="email" value={text1} handleChange={handleChange} label="Email" placeholder="veronica@example.com" helperText="This is a hint text to help the user." error="This is an error message." LeadingIcon={<FiMail />} TrailingIcon={<FiHelpCircle />} disabled={args.disabled} />\n      </StoryLayout>;\n  }\n}',...Default.parameters?.docs?.source}}},LeadingTextInput.parameters={...LeadingTextInput.parameters,docs:{...LeadingTextInput.parameters?.docs,source:{originalSource:'{\n  args: {\n    darkMode: false\n  },\n  render: args => {\n    const [text1, setText1] = useState<string>(args.value);\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setText1(e.target.value);\n    };\n    return <StoryLayout {...args}>\n        <TextInput type="text" value={text1} handleChange={handleChange} label="Website" placeholder="example.com" leadingText="https://" helperText="This is a hint text to help the user." TrailingIcon={<FiHelpCircle />} disabled={args.disabled} />\n        <div className="mb-4" />\n        <TextInput type="text" value={text1} handleChange={handleChange} label="Website" placeholder="example.com" leadingText="https://" error="This is an error message." TrailingIcon={<FiAlertCircle />} disabled={args.disabled} />\n      </StoryLayout>;\n  }\n}',...LeadingTextInput.parameters?.docs?.source}}}}}]);

package/storybook-static/stories-Typography-stories.6640f7ac.iframe.bundle.js

@@ -0,0 +1,2 @@
+/*! For license information please see stories-Typography-stories.6640f7ac.iframe.bundle.js.LICENSE.txt */
+(self.webpackChunkbox_ui=self.webpackChunkbox_ui||[]).push([[244],{"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes="",i=0;i<arguments.length;i++){var arg=arguments[i];arg&&(classes=appendClass(classes,parseValue(arg)))}return classes}function parseValue(arg){if("string"==typeof arg||"number"==typeof arg)return arg;if("object"!=typeof arg)return"";if(Array.isArray(arg))return classNames.apply(null,arg);if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]"))return arg.toString();var classes="";for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&(classes=appendClass(classes,key));return classes}function appendClass(value,newClass){return newClass?value?value+" "+newClass:value+newClass:value}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()},"./node_modules/react/cjs/react-jsx-runtime.production.js":(__unused_webpack_module,exports)=>{"use strict";var REACT_ELEMENT_TYPE=Symbol.for("react.transitional.element"),REACT_FRAGMENT_TYPE=Symbol.for("react.fragment");function jsxProd(type,config,maybeKey){var key=null;if(void 0!==maybeKey&&(key=""+maybeKey),void 0!==config.key&&(key=""+config.key),"key"in config)for(var propName in maybeKey={},config)"key"!==propName&&(maybeKey[propName]=config[propName]);else maybeKey=config;return config=maybeKey.ref,{$$typeof:REACT_ELEMENT_TYPE,type,key,ref:void 0!==config?config:null,props:maybeKey}}exports.Fragment=REACT_FRAGMENT_TYPE,exports.jsx=jsxProd,exports.jsxs=jsxProd},"./node_modules/react/jsx-runtime.js":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.js")},"./src/StoryLayout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{q:()=>StoryLayout});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const StoryLayout=args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()({"dark bg-gray-900":args.darkMode},"-m-4"),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(args.className,{"p-4":!args.noPadding}),children:args.children})});StoryLayout.__docgenInfo={description:"",methods:[],displayName:"StoryLayout",props:{darkMode:{required:!0,tsType:{name:"boolean"},description:""},className:{required:!1,tsType:{name:"String"},description:""},children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},noPadding:{required:!1,tsType:{name:"String"},description:""}}}},"./src/Typography.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{o:()=>Typography});__webpack_require__("./node_modules/react/index.js");var classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/jsx-runtime.js");const TypographyVariantClasses={xs:"text-xs",sm:"text-sm",md:"text-md",lg:"text-lg",xl:"text-xl",h6:"text-h6",h5:"text-h5",h4:"text-h4",h3:"text-h3",h2:"text-h2",h1:"text-h1"},TypographyWeightClasses={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},Typography=_ref=>{let{variant="md",customWeight="regular",customColor,className,children}=_ref;const TypographyVariantClassName=TypographyVariantClasses[variant],TypographyWeightClassName=TypographyWeightClasses[customWeight],Component=["h1","h2","h3","h4","h5","h6"].includes(null!=variant?variant:"p")?variant:"p";return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(TypographyVariantClassName,TypographyWeightClassName,className,{"tracking-tight":["h1","h2","h3"].includes(variant),"text-black dark:text-white":!customColor},customColor),children})};Typography.__docgenInfo={description:"",methods:[],displayName:"Typography",props:{variant:{required:!1,tsType:{name:"union",raw:'| "xs"\n| "sm"\n| "md"\n| "lg"\n| "xl"\n| "h6"\n| "h5"\n| "h4"\n| "h3"\n| "h2"\n| "h1"',elements:[{name:"literal",value:'"xs"'},{name:"literal",value:'"sm"'},{name:"literal",value:'"md"'},{name:"literal",value:'"lg"'},{name:"literal",value:'"xl"'},{name:"literal",value:'"h6"'},{name:"literal",value:'"h5"'},{name:"literal",value:'"h4"'},{name:"literal",value:'"h3"'},{name:"literal",value:'"h2"'},{name:"literal",value:'"h1"'}]},description:"",defaultValue:{value:'"md"',computed:!1}},customWeight:{required:!1,tsType:{name:"union",raw:'"regular" | "medium" | "semibold" | "bold"',elements:[{name:"literal",value:'"regular"'},{name:"literal",value:'"medium"'},{name:"literal",value:'"semibold"'},{name:"literal",value:'"bold"'}]},description:"",defaultValue:{value:'"regular"',computed:!1}},customColor:{required:!1,tsType:{name:"string"},description:""},customClass:{required:!1,tsType:{name:"string"},description:""},className:{required:!1,tsType:{name:"string"},description:""},children:{required:!0,tsType:{name:"union",raw:"string | React.ReactNode",elements:[{name:"string"},{name:"ReactReactNode",raw:"React.ReactNode"}]},description:""}}}},"./src/stories/Typography.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{TypographyDynamic:()=>TypographyDynamic,TypographyHeadings:()=>TypographyHeadings,TypographyText:()=>TypographyText,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/react/index.js");var _Typography__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/Typography.tsx"),_StoryLayout__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/StoryLayout.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"Example/Typography",component:_Typography__WEBPACK_IMPORTED_MODULE_1__.o,parameters:{layout:"centered"}},TypographyDynamic={args:{variant:"h1",customColor:"",customWeight:"regular",className:"",darkMode:!1},render:args=>{var _args$variant;const isHeading=["h1","h2","h3","h4","h5","h6"].includes(null!==(_args$variant=args.variant)&&void 0!==_args$variant?_args$variant:"p");return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,className:"space-y-2",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,children:[isHeading?"Display":"Text"," ",args.variant," ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("br",{})," ",args.customWeight]})})}},TypographyHeadings={args:{customWeight:"regular",className:"",darkMode:!1},parameters:{controls:{exclude:["variant","customColor","className"]}},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,className:"space-y-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h1",children:"Display h1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h2",children:"Display h2"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h3",children:"Display h3"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h4",children:"Display h4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h5",children:"Display h5"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"h6",children:"Display h6"})]})},TypographyText={args:{customWeight:"regular",className:"",darkMode:!1},parameters:{controls:{exclude:["variant","customColor","className"]}},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_StoryLayout__WEBPACK_IMPORTED_MODULE_2__.q,{...args,className:"space-y-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"xl",children:"Text xl"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"lg",children:"Text lg"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"md",children:"Text md"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"sm",children:"Text sm"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_Typography__WEBPACK_IMPORTED_MODULE_1__.o,{...args,variant:"xs",children:"Text xs"})]})},__namedExportsOrder=["TypographyDynamic","TypographyHeadings","TypographyText"];TypographyDynamic.parameters={...TypographyDynamic.parameters,docs:{...TypographyDynamic.parameters?.docs,source:{originalSource:'{\n  args: {\n    variant: "h1",\n    customColor: "",\n    //text-primary-600 dark:text-white\n    customWeight: "regular",\n    className: "",\n    darkMode: false\n  },\n  render: args => {\n    const isHeading = ["h1", "h2", "h3", "h4", "h5", "h6"].includes(args.variant ?? "p");\n    return <StoryLayout {...args} className="space-y-2">\n        <Typography {...args}>\n          {isHeading ? "Display" : "Text"} {args.variant} <br />{" "}\n          {args.customWeight}\n        </Typography>\n      </StoryLayout>;\n  }\n}',...TypographyDynamic.parameters?.docs?.source}}},TypographyHeadings.parameters={...TypographyHeadings.parameters,docs:{...TypographyHeadings.parameters?.docs,source:{originalSource:'{\n  args: {\n    customWeight: "regular",\n    className: "",\n    darkMode: false\n  },\n  parameters: {\n    controls: {\n      exclude: ["variant", "customColor", "className"]\n    }\n  },\n  render: args => <StoryLayout {...args} className="space-y-2">\n      <Typography {...args} variant="h1">\n        Display h1\n      </Typography>\n\n      <Typography {...args} variant="h2">\n        Display h2\n      </Typography>\n\n      <Typography {...args} variant="h3">\n        Display h3\n      </Typography>\n\n      <Typography {...args} variant="h4">\n        Display h4\n      </Typography>\n\n      <Typography {...args} variant="h5">\n        Display h5\n      </Typography>\n\n      <Typography {...args} variant="h6">\n        Display h6\n      </Typography>\n    </StoryLayout>\n}',...TypographyHeadings.parameters?.docs?.source}}},TypographyText.parameters={...TypographyText.parameters,docs:{...TypographyText.parameters?.docs,source:{originalSource:'{\n  args: {\n    customWeight: "regular",\n    className: "",\n    darkMode: false\n  },\n  parameters: {\n    controls: {\n      exclude: ["variant", "customColor", "className"]\n    }\n  },\n  render: args => {\n    return <StoryLayout {...args} className="space-y-2">\n        <Typography {...args} variant="xl">\n          Text xl\n        </Typography>\n        <Typography {...args} variant="lg">\n          Text lg\n        </Typography>\n        <Typography {...args} variant="md">\n          Text md\n        </Typography>\n        <Typography {...args} variant="sm">\n          Text sm\n        </Typography>\n        <Typography {...args} variant="xs">\n          Text xs\n        </Typography>\n      </StoryLayout>;\n  }\n}',...TypographyText.parameters?.docs?.source}}}}}]);

package/storybook-static/stories-Typography-stories.6640f7ac.iframe.bundle.js.LICENSE.txt

@@ -0,0 +1,15 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/tailwind.config.js

@@ -0,0 +1,113 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./src/styles/**/*.css",
+    "./.storybook/**/*.{js,jsx,ts,tsx,mdx}"
+  ],  theme: {
+    colors:{
+      "transparent": "transparent",
+      white:"#fff",
+      gray:{
+        25: "#FDFDFD",
+        50: "#FAFAFA",
+        100: "#F5F5F5",
+        200: "#E9EAEB",
+        300: "#D5D7DA",
+        400: "#A4A7AE",
+        500: "#717680",
+        600: "#535862",
+        700: "#414651",
+        800: "#252B37",
+        900: "#181D27",
+        950: "#0A0D12"
+      },
+      primary: {
+        25: "#F5FAFF",
+        50: "#EFF8FF",
+        100: "#D1E9FF",
+        200: "#B2DDFF",
+        300: "#84CAFF",
+        400: "#53B1FD",
+        500: "#2E90FA",
+        600: "#1570EF",
+        700: "#175CD3",
+        800: "#1849A9",
+        900: "#194185",
+      },
+      error: {
+        25: "#FFFBFA",
+        50: "#FEF3F2",
+        100: "#FEE4E2",
+        200: "#FECDCA",
+        300: "#FDA29B",
+        400: "#F97066",
+        500: "#F04438",
+        600: "#D92D20",
+        700: "#B42318",
+        800: "#912018",
+        900: "#7A271A",
+      },
+      warning: {
+        25: "#FFFCF5",
+        50: "#FFFAEB",
+        100: "#FEF0C7",
+        200: "#FEDF89",
+        300: "#FEC84B",
+        400: "#FDB022",
+        500: "#F79009",
+        600: "#DC6803",
+        700: "#B54708",
+        800: "#93370D",
+        900: "#7A2E0E",
+      },
+      success: {
+        25: "#F6FEF9",
+        50: "#ECFDF3",
+        100: "#D1FADF",
+        200: "#A6F4C5",
+        300: "#6CE9A6",
+        400: "#32D583",
+        500: "#12B76A",
+        600: "#039855",
+        700: "#027A48",
+        800: "#05603A",
+        900: "#054F31",
+      },
+    },
+    fontSize:{
+      xs: ["12px", "18px"],
+      sm: ["14px", "20px"],
+      md: ["16px", "24px"],
+      lg: ["18px", "28px"],
+      xl: ["20px", "30px"],
+
+      h6: ["24px", "32px"],
+      h5: ["30px", "38px"],
+      h4: ["36px", "44px"],
+      h3: ["48px", "60px"],
+      h2: ["60px", "72px"],
+      h1: ["72px", "90px"],
+    },
+    extend: {
+      spacing: {
+        4.5: "1.125rem",
+        5.5: "1.375rem",
+        6.5: "1.625rem",
+        13: "3.25rem",
+        15: "3.75rem",
+        19: "4.75rem",
+        19.5: "4.875rem",
+        50: "12.5rem",
+        58: "14.5rem",
+        62: "15.5rem",
+        70: "17.5rem",
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+}
+

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "outDir": "dist",
+    "jsx": "react",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "declaration": true,
+    "declarationMap": true,
+  },
+  "include": [
+    "src"
+  ]
+}