@learncard/react 2.3.69 → 2.5.0

package/dist/cjs/{QRCodeCard-efaa58e1.js.map → QRCodeCard-b60c0500.js.map}

@@ -1 +1 @@
-{"version":3,"file":"QRCodeCard-efaa58e1.js","sources":["../../src/components/QRCodeCard/QRCodeCard.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { QRCodeCardProps } from './types';\n\nexport const QRCodeCard: React.FC<QRCodeCardProps> = ({\n    userHandle,\n    qrCodeValue,\n    className,\n    text = null,\n}) => {\n    let textEl: React.ReactNode | null = null;\n    if (typeof text === 'string') {\n        textEl = (\n            <p className=\"flex items-center justify-center w-full text-xl text-black font-bold tracking-[9px]\">\n                {text}\n            </p>\n        );\n    } else {\n        textEl = text;\n    }\n\n    return (\n        <div\n            className={`flex flex-col justify-center items-start pt-9 rounded-[20px] shadow-3xl max-w-[400px] bg-white relative pb-8 overflow-hidden ${className}`}\n        >\n            {qrCodeValue && (\n                <div className=\"flex justify-center items-center w-full relative px-8 mb-5\">\n                    <div className=\"max-w-[90%] w-full h-auto relative\">\n                        <QRCodeSVG\n                            className=\"h-full w-full\"\n                            value={qrCodeValue}\n                            data-testid=\"qrcode-card\"\n                            bgColor=\"transparent\"\n                        />\n                    </div>\n                </div>\n            )}\n\n            {userHandle && (\n                <p\n                    className=\"flex items-center justify-center text-center w-full mb-3 font-semibold text-lg text-gray-500\"\n                    data-testid=\"qrcode-card-user-handle\"\n                >\n                    {userHandle}\n                </p>\n            )}\n\n            {textEl}\n        </div>\n    );\n};\n\nexport default QRCodeCard;\n"],"names":["React","QRCodeSVG"],"mappings":";;;;;;;;;AAKO,MAAM,aAAwC,CAAC;AAAA,EAClD,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAO,GAAA,IAAA;AACX,CAAM,KAAA;AACF,EAAA,IAAI,MAAiC,GAAA,IAAA,CAAA;AACrC,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC1B,IAAA,MAAA,mBACKA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,MAAE,SAAU,EAAA,qFAAA;AAAA,KAAA,EACR,IACL,CAAA,CAAA;AAAA,GAED,MAAA;AACH,IAAS,MAAA,GAAA,IAAA,CAAA;AAAA,GACb;AAEA,EAAA,uBACKA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgI,6HAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAE1I,+BACIA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oCAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAAC,eAAA,EAAA;AAAA,IACG,SAAU,EAAA,eAAA;AAAA,IACV,KAAO,EAAA,WAAA;AAAA,IACP,aAAY,EAAA,aAAA;AAAA,IACZ,OAAQ,EAAA,aAAA;AAAA,GACZ,CACJ,CACJ,CAGH,EAAA,UAAA,oBACID,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACG,SAAU,EAAA,8FAAA;AAAA,IACV,aAAY,EAAA,yBAAA;AAAA,GAEX,EAAA,UACL,GAGH,MACL,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"QRCodeCard-b60c0500.js","sources":["../../src/components/QRCodeCard/QRCodeCard.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { QRCodeCardProps } from './types';\n\nexport const QRCodeCard: React.FC<QRCodeCardProps> = ({\n    userHandle,\n    qrCodeValue,\n    className,\n    text = null,\n}) => {\n    let textEl: React.ReactNode | null = null;\n    if (typeof text === 'string') {\n        textEl = (\n            <p className=\"flex items-center justify-center w-full text-xl text-black font-bold tracking-[9px]\">\n                {text}\n            </p>\n        );\n    } else {\n        textEl = text;\n    }\n\n    return (\n        <div\n            className={`flex flex-col justify-center items-start pt-9 rounded-[20px] shadow-3xl max-w-[400px] bg-white relative pb-8 overflow-hidden ${className}`}\n        >\n            {qrCodeValue && (\n                <div className=\"flex justify-center items-center w-full relative px-8 mb-5\">\n                    <div className=\"max-w-[90%] w-full h-auto relative\">\n                        <QRCodeSVG\n                            className=\"h-full w-full\"\n                            value={qrCodeValue}\n                            data-testid=\"qrcode-card\"\n                            bgColor=\"transparent\"\n                        />\n                    </div>\n                </div>\n            )}\n\n            {userHandle && (\n                <p\n                    className=\"flex items-center justify-center text-center w-full mb-3 font-semibold text-lg text-gray-500\"\n                    data-testid=\"qrcode-card-user-handle\"\n                >\n                    {userHandle}\n                </p>\n            )}\n\n            {textEl}\n        </div>\n    );\n};\n\nexport default QRCodeCard;\n"],"names":["React","QRCodeSVG"],"mappings":";;;;;;;;;AAKO,MAAM,aAAwC,CAAC;AAAA,EAClD,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAO,GAAA,IAAA;AACX,CAAM,KAAA;AACF,EAAA,IAAI,MAAiC,GAAA,IAAA,CAAA;AACrC,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC1B,IAAA,MAAA,mBACKA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,MAAE,SAAU,EAAA,qFAAA;AAAA,KAAA,EACR,IACL,CAAA,CAAA;AAAA,GAED,MAAA;AACH,IAAS,MAAA,GAAA,IAAA,CAAA;AAAA,GACb;AAEA,EAAA,uBACKA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgI,6HAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAE1I,+BACIA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oCAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAAC,eAAA,EAAA;AAAA,IACG,SAAU,EAAA,eAAA;AAAA,IACV,KAAO,EAAA,WAAA;AAAA,IACP,aAAY,EAAA,aAAA;AAAA,IACZ,OAAQ,EAAA,aAAA;AAAA,GACZ,CACJ,CACJ,CAGH,EAAA,UAAA,oBACID,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACG,SAAU,EAAA,8FAAA;AAAA,IACV,aAAY,EAAA,yBAAA;AAAA,GAEX,EAAA,UACL,GAGH,MACL,CAAA,CAAA;AAER;;;;"}

package/dist/cjs/{RoundedPill-15c0aca9.js → RoundedPill-75454f72.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var icons = require('./icons-cf98ef88.js');
+var icons = require('./icons-6433b474.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -103,4 +103,4 @@ const RoundedPill = ({
 
 exports.CheckmarkSvg = CheckmarkSvg;
 exports.RoundedPill = RoundedPill;
-//# sourceMappingURL=RoundedPill-15c0aca9.js.map
+//# sourceMappingURL=RoundedPill-75454f72.js.map

package/dist/cjs/{RoundedPill-15c0aca9.js.map → RoundedPill-75454f72.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RoundedPill-15c0aca9.js","sources":["../../src/components/RoundedPill/RoundedPill.tsx"],"sourcesContent":["import React from 'react';\nimport { TYPE_TO_ICON } from '../../constants/icons';\nimport { RoundedPillProps } from '../../types';\n\nconst TYPE_TO_BG_COLOR_CLASS: any = {\n    skill: 'indigo-50',\n    achievement: 'spice-50',\n    course: 'emerald-50',\n    locked: 'grayscale-100',\n};\n\nconst TYPE_TO_FOREGROUND_COLOR: any = {\n    skill: 'indigo-500',\n    achievement: 'spice-500',\n    course: 'emerald-700',\n    locked: 'grayscale-700',\n};\n\nconst TYPE_TO_CHECKMARK_COLOR: any = {\n    skill: '#6366F1',\n    achievement: '#FF5820',\n    course: '#00BA88',\n    locked: '#52597A',\n};\n\ntype InlineSVGProps = {\n    color?: string;\n    size?: string | number;\n};\n\nexport const CheckmarkSvg: React.FC<InlineSVGProps> = ({ color = '#00BA88', size = '20' }) => {\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                d=\"M16.875 5.62537L8.125 14.375L3.75 10.0004\"\n                stroke={color}\n                strokeWidth=\"3\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n};\n\nconst LockedIcon: React.FC<InlineSVGProps> = ({ color = '#52597A', size = '20' }) => {\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                d=\"M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z\"\n                stroke={color}\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875\"\n                stroke={color}\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z\"\n                fill={color}\n            />\n        </svg>\n    );\n};\n\nexport const RoundedPill: React.FC<RoundedPillProps> = ({\n    statusText,\n    type = 'skill',\n    onClick,\n    showCheckmark = false,\n}) => {\n    const backgroundColor = `bg-${TYPE_TO_BG_COLOR_CLASS[type]}`;\n    const iconBgColor = `bg-${TYPE_TO_FOREGROUND_COLOR[type]}`;\n    const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute flex-shrink-0 `;\n\n    const handleClick = () => {\n        onClick?.();\n    };\n\n    const iconSrc = TYPE_TO_ICON[type];\n    const textColor = `text-${TYPE_TO_FOREGROUND_COLOR[type]}`;\n    const checkColor = TYPE_TO_CHECKMARK_COLOR[type];\n    const locked = type === 'locked';\n\n    const displayText = !locked ? statusText : 'Locked';\n\n    return (\n        <button\n            onClick={handleClick}\n            className={`flex relative ${backgroundColor} items-center px-[5px] py-[2px]  w-[180px] h-[46px] rounded-[40px] rounded-pill-el`}\n        >\n            {!locked && (\n                <div className={circleClass}>\n                    <img\n                        className=\"h-full w-full object-cover max-h-[24px] max-w-[24px] flex-shrink-0 \"\n                        src={iconSrc ?? ''}\n                        alt=\"Icon image\"\n                    />\n                </div>\n            )}\n            <span\n                className={`font-semibold ${textColor} w-full flex items-center justify-center text-[14px]`}\n            >\n                {showCheckmark && !locked && (\n                    <span className=\"rounded-pill-checkmark mr-[5px]\">\n                        <CheckmarkSvg color={checkColor} />\n                    </span>\n                )}\n                {locked && (\n                    <span className=\"rounded-pill-checkmark mr-[5px]\">\n                        <LockedIcon />\n                    </span>\n                )}\n\n                {displayText}\n            </span>\n        </button>\n    );\n};\n\nexport default RoundedPill;\n"],"names":["React","TYPE_TO_ICON"],"mappings":"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"}
+{"version":3,"file":"RoundedPill-75454f72.js","sources":["../../src/components/RoundedPill/RoundedPill.tsx"],"sourcesContent":["import React from 'react';\nimport { TYPE_TO_ICON } from '../../constants/icons';\nimport { RoundedPillProps } from '../../types';\n\nconst TYPE_TO_BG_COLOR_CLASS: any = {\n    skill: 'indigo-50',\n    achievement: 'spice-50',\n    course: 'emerald-50',\n    locked: 'grayscale-100',\n};\n\nconst TYPE_TO_FOREGROUND_COLOR: any = {\n    skill: 'indigo-500',\n    achievement: 'spice-500',\n    course: 'emerald-700',\n    locked: 'grayscale-700',\n};\n\nconst TYPE_TO_CHECKMARK_COLOR: any = {\n    skill: '#6366F1',\n    achievement: '#FF5820',\n    course: '#00BA88',\n    locked: '#52597A',\n};\n\ntype InlineSVGProps = {\n    color?: string;\n    size?: string | number;\n};\n\nexport const CheckmarkSvg: React.FC<InlineSVGProps> = ({ color = '#00BA88', size = '20' }) => {\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                d=\"M16.875 5.62537L8.125 14.375L3.75 10.0004\"\n                stroke={color}\n                strokeWidth=\"3\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n};\n\nconst LockedIcon: React.FC<InlineSVGProps> = ({ color = '#52597A', size = '20' }) => {\n    return (\n        <svg\n            width={size}\n            height={size}\n            viewBox=\"0 0 20 20\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                d=\"M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z\"\n                stroke={color}\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875\"\n                stroke={color}\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z\"\n                fill={color}\n            />\n        </svg>\n    );\n};\n\nexport const RoundedPill: React.FC<RoundedPillProps> = ({\n    statusText,\n    type = 'skill',\n    onClick,\n    showCheckmark = false,\n}) => {\n    const backgroundColor = `bg-${TYPE_TO_BG_COLOR_CLASS[type]}`;\n    const iconBgColor = `bg-${TYPE_TO_FOREGROUND_COLOR[type]}`;\n    const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute flex-shrink-0 `;\n\n    const handleClick = () => {\n        onClick?.();\n    };\n\n    const iconSrc = TYPE_TO_ICON[type];\n    const textColor = `text-${TYPE_TO_FOREGROUND_COLOR[type]}`;\n    const checkColor = TYPE_TO_CHECKMARK_COLOR[type];\n    const locked = type === 'locked';\n\n    const displayText = !locked ? statusText : 'Locked';\n\n    return (\n        <button\n            onClick={handleClick}\n            className={`flex relative ${backgroundColor} items-center px-[5px] py-[2px]  w-[180px] h-[46px] rounded-[40px] rounded-pill-el`}\n        >\n            {!locked && (\n                <div className={circleClass}>\n                    <img\n                        className=\"h-full w-full object-cover max-h-[24px] max-w-[24px] flex-shrink-0 \"\n                        src={iconSrc ?? ''}\n                        alt=\"Icon image\"\n                    />\n                </div>\n            )}\n            <span\n                className={`font-semibold ${textColor} w-full flex items-center justify-center text-[14px]`}\n            >\n                {showCheckmark && !locked && (\n                    <span className=\"rounded-pill-checkmark mr-[5px]\">\n                        <CheckmarkSvg color={checkColor} />\n                    </span>\n                )}\n                {locked && (\n                    <span className=\"rounded-pill-checkmark mr-[5px]\">\n                        <LockedIcon />\n                    </span>\n                )}\n\n                {displayText}\n            </span>\n        </button>\n    );\n};\n\nexport default RoundedPill;\n"],"names":["React","TYPE_TO_ICON"],"mappings":"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"}